@globalbrain/sefirot 2.9.0 → 2.10.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/lib/components/STableCell.vue +40 -26
  2. package/lib/components/STableCellPills.vue +42 -0
  3. package/lib/composables/Table.ts +13 -2
  4. package/lib/composables/Tooltip.ts +1 -2
  5. package/lib/support/Day/plugins/RelativeTime.ts +1 -2
  6. package/package.json +25 -26
package/lib/components/STableCell.vue CHANGED
@@ -1,70 +1,84 @@
1
1
  <script setup lang="ts">
2
+ import { computed } from 'vue'
2
3
  import { TableCell } from '../composables/Table'
3
4
  import STableCellAvatar from './STableCellAvatar.vue'
4
5
  import STableCellAvatars from './STableCellAvatars.vue'
5
6
  import STableCellDay from './STableCellDay.vue'
6
7
  import STableCellPill from './STableCellPill.vue'
8
+ import STableCellPills from './STableCellPills.vue'
7
9
  import STableCellText from './STableCellText.vue'
8
10
 
9
- defineProps<{
11
+ const props = defineProps<{
10
12
  name: string
11
13
  className?: string
12
- cell?: TableCell
14
+ cell?: any
13
15
  value: any
14
16
  record: any
15
17
  records: Record<string, any>
16
18
  }>()
19
+
20
+ const computedCell = computed<TableCell | undefined>(() =>
21
+ typeof props.cell === 'function'
22
+ ? props.cell(props.value, props.record)
23
+ : props.cell
24
+ )
17
25
  </script>
18
26
 
19
27
  <template>
20
28
  <div class="STableCell" :class="[className, `col-${name}`]">
21
29
  <STableCellText
22
- v-if="!cell || cell.type === 'text'"
30
+ v-if="!computedCell || computedCell.type === 'text'"
23
31
  :value="value"
24
32
  :record="record"
25
- :icon="cell?.icon"
26
- :getter="cell?.value"
27
- :link="cell?.link"
28
- :color="cell?.color"
29
- :icon-color="cell?.iconColor"
30
- :on-click="cell?.onClick"
33
+ :icon="computedCell?.icon"
34
+ :getter="computedCell?.value"
35
+ :link="computedCell?.link"
36
+ :color="computedCell?.color"
37
+ :icon-color="computedCell?.iconColor"
38
+ :on-click="computedCell?.onClick"
31
39
  />
32
40
  <STableCellDay
33
- v-else-if="cell.type === 'day'"
41
+ v-else-if="computedCell.type === 'day'"
34
42
  :value="value"
35
43
  :record="record"
36
- :format="cell.format"
37
- :color="cell.color"
44
+ :format="computedCell.format"
45
+ :color="computedCell.color"
38
46
  />
39
47
  <STableCellPill
40
- v-else-if="cell.type === 'pill'"
48
+ v-else-if="computedCell.type === 'pill'"
49
+ :value="value"
50
+ :record="record"
51
+ :getter="computedCell.value"
52
+ :color="computedCell.color"
53
+ />
54
+ <STableCellPills
55
+ v-else-if="computedCell.type === 'pills'"
41
56
  :value="value"
42
57
  :record="record"
43
- :getter="cell.value"
44
- :color="cell.color"
58
+ :pills="computedCell.pills"
45
59
  />
46
60
  <STableCellAvatar
47
- v-else-if="cell.type === 'avatar'"
61
+ v-else-if="computedCell.type === 'avatar'"
48
62
  :value="value"
49
63
  :record="record"
50
- :image="cell.image"
51
- :name="cell.name"
52
- :link="cell.link"
53
- :color="cell.color"
64
+ :image="computedCell.image"
65
+ :name="computedCell.name"
66
+ :link="computedCell.link"
67
+ :color="computedCell.color"
54
68
  />
55
69
  <STableCellAvatars
56
- v-else-if="cell.type === 'avatars'"
70
+ v-else-if="computedCell.type === 'avatars'"
57
71
  :value="value"
58
72
  :record="record"
59
- :avatars="cell.avatars"
60
- :color="cell.color"
73
+ :avatars="computedCell.avatars"
74
+ :color="computedCell.color"
61
75
  />
62
76
  <component
63
- v-else-if="cell.type === 'component'"
64
- :is="cell.component"
77
+ v-else-if="computedCell.type === 'component'"
78
+ :is="computedCell.component"
65
79
  :value="value"
66
80
  :record="record"
67
- v-bind="cell.props"
81
+ v-bind="computedCell.props"
68
82
  />
69
83
  </div>
70
84
  </template>
package/lib/components/STableCellPills.vue ADDED
@@ -0,0 +1,42 @@
1
+ <script setup lang="ts">
2
+ import { computed } from 'vue'
3
+ import { TableCellPillColor } from '../composables/Table'
4
+ import STableCellPill from './STableCellPill.vue'
5
+
6
+ export interface Pill {
7
+ label: string
8
+ color: TableCellPillColor
9
+ }
10
+
11
+ const props = defineProps<{
12
+ value: string[]
13
+ record: any
14
+ pills(value: string[], record: any): Pill[]
15
+ }>()
16
+
17
+ const items = computed(() => props.pills(props.value, props.record))
18
+ </script>
19
+
20
+ <template>
21
+ <div class="STableCellPills">
22
+ <STableCellPill
23
+ v-for="item in items"
24
+ :key="item.label"
25
+ :value="item.label"
26
+ :record="record"
27
+ :color="item.color"
28
+ />
29
+ </div>
30
+ </template>
31
+
32
+ <style scoped lang="postcss">
33
+ .STableCellPills {
34
+ display: flex;
35
+ padding: 0 14px;
36
+
37
+ :deep(.STableCellPill) {
38
+ padding-right: 2px;
39
+ padding-left: 2px;
40
+ }
41
+ }
42
+ </style>
package/lib/composables/Table.ts CHANGED
@@ -25,18 +25,19 @@ export interface TableColumn {
25
25
  label: string
26
26
  className?: string
27
27
  dropdown?: DropdownSection[]
28
- cell?: TableCell
28
+ cell?: TableCell | ((value: any, record: any) => TableCell)
29
29
  }
30
30
 
31
31
  export type TableCell =
32
32
  | TableCellText
33
33
  | TableCellDay
34
34
  | TableCellPill
35
+ | TableCellPills
35
36
  | TableCellAvatar
36
37
  | TableCellAvatars
37
38
  | TableCellComponent
38
39
 
39
- export type TableCellType = 'text' | 'day' | 'pill' | 'avatar' | 'avatars' | 'component'
40
+ export type TableCellType = 'text' | 'day' | 'pill' | 'pills' | 'avatar' | 'avatars' | 'component'
40
41
 
41
42
  export interface TableCellBase {
42
43
  type: TableCellType
@@ -75,6 +76,16 @@ export interface TableCellPill extends TableCellBase {
75
76
 
76
77
  export type TableCellPillColor = 'info' | 'success' | 'warning' | 'danger' | 'mute'
77
78
 
79
+ export interface TableCellPills extends TableCellBase {
80
+ type: 'pills'
81
+ pills(value: any, record: any): TableCellPillItem[]
82
+ }
83
+
84
+ export interface TableCellPillItem {
85
+ label: string
86
+ color: TableCellPillColor
87
+ }
88
+
78
89
  export interface TableCellAvatar extends TableCellBase {
79
90
  type: 'avatar'
80
91
  image?(value: any, record: any): string | undefined
package/lib/composables/Tooltip.ts CHANGED
@@ -46,8 +46,7 @@ export function useTooltip(
46
46
 
47
47
  if (tipRect.x < 0) {
48
48
  adjustLeftPosition(contentRect.x)
49
- }
50
- else if (tipRightX > window.outerWidth) {
49
+ } else if (tipRightX > window.outerWidth) {
51
50
  adjustRightPosition(contentRightX)
52
51
  }
53
52
 
package/lib/support/Day/plugins/RelativeTime.ts CHANGED
@@ -86,8 +86,7 @@ export const relativeTime: PluginFunc<RelativeTimeOptions> = (o, c, d) => {
86
86
  }
87
87
  if (typeof format === 'string') {
88
88
  out = (format as any).replace('%d', abs)
89
- }
90
- else {
89
+ } else {
91
90
  out = format(abs, withoutSuffix, t.l, isFuture)
92
91
  }
93
92
  break
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@globalbrain/sefirot",
3
- "version": "2.9.0",
3
+ "version": "2.10.0",
4
4
  "description": "Vue Components for Global Brain Design System.",
5
5
  "author": "Kia Ishii <ka.ishii@globalbrains.com>",
6
6
  "license": "MIT",
@@ -42,48 +42,47 @@
42
42
  "vue-router": "^4.1.5"
43
43
  },
44
44
  "dependencies": {
45
- "dayjs": "^1.11.5"
45
+ "dayjs": "^1.11.7"
46
46
  },
47
47
  "devDependencies": {
48
- "@globalbrain/eslint-config": "^1.0.0",
49
- "@histoire/plugin-vue": "^0.10.7",
50
- "@iconify-icons/ph": "^1.2.2",
51
- "@iconify/vue": "^4.0.0",
48
+ "@globalbrain/eslint-config": "^1.1.0",
49
+ "@histoire/plugin-vue": "^0.11.9",
50
+ "@iconify-icons/ph": "^1.2.3",
51
+ "@iconify/vue": "^4.0.1",
52
52
  "@types/body-scroll-lock": "^3.1.0",
53
53
  "@types/lodash-es": "^4.17.6",
54
54
  "@types/markdown-it": "^12.2.3",
55
- "@types/node": "^18.8.0",
56
- "@vitejs/plugin-vue": "^3.1.2",
57
- "@vitest/coverage-c8": "^0.25.1",
58
- "@vue/test-utils": "^2.2.1",
55
+ "@types/node": "^18.11.11",
56
+ "@vitejs/plugin-vue": "^3.2.0",
57
+ "@vitest/coverage-c8": "^0.25.3",
58
+ "@vue/test-utils": "^2.2.6",
59
59
  "@vuelidate/core": "^2.0.0",
60
60
  "@vuelidate/validators": "^2.0.0",
61
- "@vueuse/core": "^9.3.0",
61
+ "@vueuse/core": "^9.6.0",
62
62
  "body-scroll-lock": "^4.0.0-beta.0",
63
63
  "chalk": "^4.1.2",
64
64
  "conventional-changelog-cli": "^2.2.2",
65
- "dayjs": "^1.11.5",
66
65
  "enquirer": "^2.3.6",
67
- "eslint": "^8.27.0",
66
+ "eslint": "^8.29.0",
68
67
  "execa": "^5.1.1",
69
68
  "fuse.js": "^6.6.2",
70
- "happy-dom": "^6.0.4",
71
- "histoire": "^0.10.7",
69
+ "happy-dom": "^8.1.0",
70
+ "histoire": "^0.11.9",
72
71
  "lodash-es": "^4.17.21",
73
72
  "markdown-it": "^13.0.1",
74
73
  "normalize.css": "^8.0.1",
75
- "pinia": "^2.0.22",
76
- "postcss": "^8.4.17",
77
- "postcss-nested": "^5.0.6",
78
- "semver": "^7.3.7",
79
- "typescript": "^4.8.4",
74
+ "pinia": "^2.0.27",
75
+ "postcss": "^8.4.19",
76
+ "postcss-nested": "^6.0.0",
77
+ "semver": "^7.3.8",
78
+ "typescript": "^4.9.4",
80
79
  "v-calendar": "3.0.0-alpha.8",
81
- "vite": "^3.1.4",
82
- "vitepress": "1.0.0-alpha.19",
83
- "vitest": "^0.25.1",
84
- "vue": "^3.2.40",
85
- "vue-router": "^4.1.5",
86
- "vue-tsc": "^1.0.8"
80
+ "vite": "^3.2.5",
81
+ "vitepress": "1.0.0-alpha.30",
82
+ "vitest": "^0.25.3",
83
+ "vue": "^3.2.45",
84
+ "vue-router": "^4.1.6",
85
+ "vue-tsc": "^1.0.11"
87
86
  },
88
87
  "scripts": {
89
88
  "docs": "vitepress dev docs --port 3000",