@globalbrain/sefirot 3.3.0 → 3.4.0

package/lib/components/SCard.vue

@@ -2,7 +2,7 @@
 import { computed } from 'vue'
 import { provideCardState } from '../composables/Card'
 
-export type Size = 'small' | 'medium' | 'large'
+export type Size = 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge'
 export type Mode = 'neutral' | 'info' | 'success' | 'warning' | 'danger'
 
 const props = defineProps<{
@@ -83,6 +83,20 @@ const classes = computed(() => [
       max-width: 768px;
     }
   }
+
+  &.xlarge {
+    @media (min-width: 1056px) {
+      margin: 48px auto 128px;
+      max-width: 960px;
+    }
+  }
+
+  &.xxlarge {
+    @media (min-width: 1248px) {
+      margin: 48px auto 128px;
+      max-width: 1152px;
+    }
+  }
 }
 
 .SModal.fade-enter-from > .SCard,

package/lib/components/SInputDropdownItemAvatar.vue

@@ -36,7 +36,7 @@ defineEmits<{
 <style lang="postcss" scoped>
 .SInputDropdownItemAvatar {
   display: flex;
-  border: 1px solid var(--c-divider-light);
+  border: 1px solid var(--c-divider);
   border-radius: 14px;
   padding: 0 12px 0 0;
   background-color: var(--c-bg-mute);

package/lib/components/SInputDropdownItemText.vue

@@ -29,7 +29,7 @@ defineEmits<{
 <style lang="postcss" scoped>
 .SInputDropdownItemText {
   display: flex;
-  border: 1px solid var(--c-divider-light);
+  border: 1px solid var(--c-divider);
   border-radius: 14px;
   padding: 0 12px;
   background-color: var(--c-bg-mute);

package/lib/components/SSheet.vue

@@ -31,7 +31,7 @@ defineEmits<{
 <style scoped lang="postcss">
 .SSheet {
   position: relative;
-  border: 1px solid var(--c-divider-light);
+  border: 1px solid var(--c-divider);
   border-radius: 16px;
   background-color: var(--c-bg);
   transition: opacity 0.25s, transform 0.25s;

package/lib/components/SSheetFooter.vue

@@ -6,7 +6,7 @@
 
 <style scoped lang="postcss">
 .SSheetFooter {
-  border-top: 1px solid var(--c-divider-light);
+  border-top: 1px solid var(--c-divider);
   padding: 0 16px;
 
   @media (min-width: 512px) {

package/lib/components/SSnackbar.vue

@@ -44,7 +44,7 @@ function close() {
 <style scoped lang="postcss">
 .SSnackbar {
   position: relative;
-  border: 1px solid var(--c-divider-light);
+  border: 1px solid var(--c-divider);
   border-radius: 6px;
   width: 100%;
   background-color: var(--c-bg-elv-up);

package/lib/components/SStep.vue

@@ -92,7 +92,7 @@ defineProps({
   height: 2px;
 }
 
-.bar.mute   { background-color: var(--c-divider-light); }
+.bar.mute   { background-color: var(--c-divider); }
 .bar.active { background-color: var(--c-success); }
 .bar.failed { background-color: var(--c-danger); }
 

package/lib/components/STable.vue

@@ -12,6 +12,7 @@ import {
   watch
 } from 'vue'
 import { type Table } from '../composables/Table'
+import { getTextWidth } from '../support/Text'
 import SInputCheckbox from './SInputCheckbox.vue'
 import SSpinner from './SSpinner.vue'
 import STableCell from './STableCell.vue'
@@ -204,6 +205,52 @@ useResizeObserver(block, ([entry]) => {
 
 const resizeObserver = useResizeObserver(head, handleResize)
 
+const font = typeof document !== 'undefined'
+  ? `500 12px ${getComputedStyle(document.body).fontFamily}`
+  : '500 12px Inter'
+
+const actionsColumnWidth = computed(() => {
+  const { cell } = unref(props.options.columns).actions ?? {}
+
+  if (
+    typeof document === 'undefined'
+    || !cell
+    || typeof cell === 'function'
+    || cell.type !== 'actions'
+  ) {
+    return undefined
+  }
+
+  const { actions } = cell
+
+  const widths = actions.map(({ icon, label }) => {
+    // has only icon
+    if (icon && !label) {
+      return 1 /* border */ + 5 /* padding */ + 16 /* icon */ + 5 /* padding */ + 1 /* border */
+    }
+
+    // has only label
+    if (label && !icon) {
+      return 1 /* border */ + 12 /* padding */ + getTextWidth(label, font) + 12 /* padding */ + 1 /* border */
+    }
+
+    // has both icon and label
+    if (icon && label) {
+      return 1 /* border */ + 8 /* padding */ + 16 /* icon */ + 4 /* padding */ + getTextWidth(label, font) + 10 /* padding */ + 1 /* border */
+    }
+
+    return 0
+  })
+
+  return 8 /* padding */ + widths.reduce((a, b) => a + b, 0) + 8 /* padding */
+})
+
+watch(actionsColumnWidth, (newValue) => {
+  if (newValue) {
+    updateColWidth('actions', `${newValue}px`)
+  }
+}, { immediate: true, flush: 'post' })
+
 function stopObserving() {
   const orders = ordersToShow.value
   const lastOrder
@@ -496,7 +543,7 @@ function updateSelected(selected: unknown[]) {
 
 :deep(.row) {
   display: flex;
-  border-bottom: 1px solid var(--c-divider-2);
+  border-bottom: 1px solid var(--c-gutter);
 }
 
 :deep(.row.last),

package/lib/components/STableCellActions.vue

@@ -31,8 +31,8 @@ defineProps<{
   min-height: 40px;
   display: flex;
   align-items: center;
-  justify-content: center;
   flex-wrap: nowrap;
   flex-direction: row;
+  padding: 0 8px;
 }
 </style>

package/lib/components/STableColumn.vue

@@ -151,7 +151,7 @@ function stopDialogPositionListener() {
   background-color: var(--c-bg-elv-4);
 
   &.has-header {
-    border-top: 1px solid var(--c-divider-2);
+    border-top: 1px solid var(--c-gutter);
   }
 
   .STableItem:first-child & {

package/lib/components/STableFooter.vue

@@ -56,7 +56,7 @@ const hasNext = computed(() => {
 
 <style scoped lang="postcss">
 .STableFooter {
-  border-top: 1px solid var(--c-divider-2);
+  border-top: 1px solid var(--c-gutter);
   border-radius: 0 0 calc(var(--table-border-radius) - 1px) calc(var(--table-border-radius) - 1px);
   padding-right: var(--table-padding-right);
   padding-left: var(--table-padding-left);

package/lib/components/STableHeaderMenu.vue

@@ -47,6 +47,6 @@ const normalizedMenu = computed(() => {
   margin: 0 8px;
   width: 1px;
   height: 16px;
-  background-color: var(--c-divider-2);
+  background-color: var(--c-gutter);
 }
 </style>

package/lib/components/STableItem.vue

@@ -26,10 +26,13 @@ const classes = computed(() => [
 .STableItem {
   position: var(--table-col-position, relative);
   left: var(--table-col-left, 0);
+  right: var(--table-col-right, auto);
   z-index: var(--table-col-z-index, auto);
   flex-shrink: 0;
   flex-grow: 1;
-  border-right: 1px solid var(--c-divider-light);
+  border-left: var(--table-col-border-left, 0) solid var(--c-gutter);
+  border-right: 1px solid var(--c-gutter);
+  margin-left: calc(var(--table-col-border-left, 0) * -1);
   min-width: var(--table-col-width);
   max-width: var(--table-col-width);
 

package/lib/styles/variables.css

@@ -441,7 +441,7 @@
   --button-fill-mute-active-border-color: var(--c-border-mute-3);
   --button-fill-mute-active-text-color: var(--c-text-2);
   --button-fill-mute-active-bg-color: var(--c-bg-mute-3);
-  --button-fill-mute-disabled-border-color: var(--c-divider-2);
+  --button-fill-mute-disabled-border-color: var(--c-border-mute-1);
   --button-fill-mute-disabled-text-color: var(--c-text-3);
   --button-fill-mute-disabled-content-color: var(--c-text-3);
   --button-fill-mute-disabled-bg-color: var(--c-bg-mute-1);
@@ -508,11 +508,11 @@
   --button-fill-info-disabled-border-color: var(--c-border-info-1);
   --button-fill-info-disabled-text-color: var(--c-white-a3);
   --button-fill-info-disabled-content-color: var(--c-white-a3);
-  --button-fill-info-disabled-bg-color: var(--c-info-bg-dark);
+  --button-fill-info-disabled-bg-color: var(--c-blue-8);
 
   --button-fill-success-border-color: var(--c-border-success-1);
   --button-fill-success-text-color: var(--c-white-1);
-  --button-fill-success-content-color: var(--c-success-text);
+  --button-fill-success-content-color: var(--c-white-1);
   --button-fill-success-bg-color: var(--c-bg-success-1);
   --button-fill-success-loader-color: var(--c-white);
   --button-fill-success-hover-border-color: var(--c-border-success-2);
@@ -524,7 +524,7 @@
   --button-fill-success-disabled-border-color: var(--c-border-success-1);
   --button-fill-success-disabled-text-color: var(--c-white-a3);
   --button-fill-success-disabled-content-color: var(--c-white-a3);
-  --button-fill-success-disabled-bg-color: var(--c-success-bg-dark);
+  --button-fill-success-disabled-bg-color: var(--c-green-8);
 
   --button-fill-warning-border-color: var(--c-border-mute-1);
   --button-fill-warning-text-color: var(--c-text-warning-1);
@@ -826,7 +826,7 @@
  * -------------------------------------------------------------------------- */
 
 :root {
-  --table-border: 1px solid var(--c-divider-2);
+  --table-border: 1px solid var(--c-divider);
   --table-border-top: var(--table-border);
   --table-border-right: var(--table-border);
   --table-border-bottom: var(--table-border);

package/lib/support/Text.ts

@@ -0,0 +1,25 @@
+// Adapted from https://stackoverflow.com/a/21015393/11613622
+
+let _canvas: HTMLCanvasElement
+
+export function getTextWidth(text: string, font: string): number
+export function getTextWidth(text: string, el: HTMLElement): number
+
+export function getTextWidth(text: string, fontOrEl: string | HTMLElement): number {
+  const canvas = _canvas || (_canvas = document.createElement('canvas'))
+  const context = canvas.getContext('2d')!
+  context.font = typeof fontOrEl === 'string' ? fontOrEl : getCanvasFont(fontOrEl)
+  const metrics = context.measureText(text)
+
+  return metrics.width
+}
+
+function getCanvasFont(el: HTMLElement) {
+  const {
+    fontWeight = 'normal',
+    fontSize = '16px',
+    fontFamily = 'Times New Roman'
+  } = getComputedStyle(el)
+
+  return `${fontWeight} ${fontSize} ${fontFamily}`
+}

package/lib/types/shims.d.ts

@@ -1,3 +1,7 @@
-declare module 'v-calendar' {
-  export const DatePicker: any
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@globalbrain/sefirot",
-  "version": "3.3.0",
-  "packageManager": "pnpm@8.10.3",
+  "version": "3.4.0",
+  "packageManager": "pnpm@8.10.4",
   "description": "Vue Components for Global Brain Design System.",
   "author": "Kia Ishii <ka.ishii@globalbrains.com>",
   "license": "MIT",
@@ -20,6 +20,22 @@
   "files": [
     "lib"
   ],
+  "scripts": {
+    "docs": "vitepress dev docs --port 4000",
+    "docs:build": "vitepress build docs",
+    "docs:preview": "vitepress serve docs --port 3000",
+    "story": "histoire dev --port 3000",
+    "story:build": "histoire build",
+    "story:preview": "histoire preview --port 3000",
+    "type": "vue-tsc --noEmit",
+    "lint": "eslint --fix .",
+    "lint:fail": "eslint .",
+    "vitest": "vitest",
+    "coverage": "vitest run --coverage",
+    "test": "pnpm run type && pnpm run lint && pnpm run coverage",
+    "test:fail": "pnpm run type && pnpm run lint:fail && pnpm run coverage",
+    "release": "release-it"
+  },
   "peerDependencies": {
     "@iconify-icons/ph": "^1.2.5",
     "@iconify/vue": "^4.1.1",
@@ -29,7 +45,7 @@
     "@types/markdown-it": "^13.0.6",
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.4",
-    "@vueuse/core": "^10.6.0",
+    "@vueuse/core": "^10.6.1",
     "body-scroll-lock": "4.0.0-beta.0",
     "fuse.js": "^7.0.0",
     "lodash-es": "^4.17.21",
@@ -47,9 +63,10 @@
   },
   "devDependencies": {
     "@globalbrain/eslint-config": "^1.5.2",
-    "@histoire/plugin-vue": "^0.17.4",
+    "@histoire/plugin-vue": "^0.17.5",
     "@iconify-icons/ph": "^1.2.5",
     "@iconify/vue": "^4.1.1",
+    "@release-it/conventional-changelog": "^8.0.1",
     "@tanstack/vue-virtual": "3.0.0-beta.62",
     "@types/body-scroll-lock": "^3.1.2",
     "@types/lodash-es": "^4.17.11",
@@ -60,23 +77,19 @@
     "@vue/test-utils": "^2.4.1",
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.4",
-    "@vueuse/core": "^10.6.0",
+    "@vueuse/core": "^10.6.1",
     "body-scroll-lock": "4.0.0-beta.0",
-    "chalk": "^4.1.2",
-    "conventional-changelog-cli": "^4.1.0",
-    "enquirer": "^2.4.1",
     "eslint": "^8.53.0",
-    "execa": "^5.1.1",
     "fuse.js": "^7.0.0",
     "happy-dom": "^12.10.3",
-    "histoire": "^0.17.4",
+    "histoire": "^0.17.5",
     "lodash-es": "^4.17.21",
     "markdown-it": "^13.0.2",
     "normalize.css": "^8.0.1",
     "pinia": "^2.1.7",
     "postcss": "^8.4.31",
     "postcss-nested": "^6.0.1",
-    "semver": "^7.5.4",
+    "release-it": "^17.0.0",
     "typescript": "~5.2.2",
     "v-calendar": "^3.1.2",
     "vite": "^4.5.0",
@@ -85,22 +98,5 @@
     "vue": "^3.3.8",
     "vue-router": "^4.2.5",
     "vue-tsc": "^1.8.22"
-  },
-  "scripts": {
-    "docs": "vitepress dev docs --port 4000",
-    "docs:build": "vitepress build docs",
-    "docs:preview": "vitepress serve docs --port 3000",
-    "story": "histoire dev --port 3000",
-    "story:build": "histoire build",
-    "story:preview": "histoire preview --port 3000",
-    "type": "vue-tsc --noEmit",
-    "lint": "eslint --fix .",
-    "lint:fail": "eslint .",
-    "vitest": "vitest",
-    "coverage": "vitest run --coverage",
-    "test": "pnpm run type && pnpm run lint && pnpm run coverage",
-    "test:fail": "pnpm run type && pnpm run lint:fail && pnpm run coverage",
-    "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s",
-    "release": "node scripts/release.js"
   }
-}
+}

package/lib/types/vue-shims.d.ts

@@ -1,7 +0,0 @@
-declare module '*.vue' {
-  import { DefineComponent } from 'vue'
-
-  const component: DefineComponent<{}, {}, any>
-
-  export default component
-}