@globalbrain/sefirot 3.2.0 → 3.3.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 (11) hide show
  1. package/lib/components/SPill.vue +39 -19
  2. package/lib/components/SState.vue +27 -17
  3. package/lib/components/STable.vue +5 -1
  4. package/lib/components/STableCell.vue +0 -1
  5. package/lib/components/STableCellActions.vue +13 -13
  6. package/lib/components/SW.vue +3 -0
  7. package/lib/composables/Table.ts +2 -1
  8. package/lib/styles/bootstrap.css +1 -0
  9. package/lib/styles/utilities.css +3 -0
  10. package/lib/styles/variables.css +24 -12
  11. package/package.json +31 -31
package/lib/components/SPill.vue CHANGED
@@ -3,15 +3,18 @@ import { computed } from 'vue'
3
3
 
4
4
  export type Size = 'mini' | 'small' | 'medium' | 'large'
5
5
  export type Type = 'dimm' | 'fill'
6
- export type Mode = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
6
+ export type Mode = 'default' | 'mute' | 'neutral' | 'info' | 'success' | 'warning' | 'danger'
7
7
 
8
8
  const props = defineProps<{
9
- tag?: string
9
+ as?: string
10
10
  size?: Size
11
11
  type?: Type
12
12
  mode?: Mode
13
13
  label?: string
14
14
  clickable?: boolean
15
+
16
+ // @deprecated Use `as` instead.
17
+ tag?: string
15
18
  }>()
16
19
 
17
20
  const emit = defineEmits<{
@@ -21,14 +24,13 @@ const emit = defineEmits<{
21
24
  const classes = computed(() => [
22
25
  props.size ?? 'small',
23
26
  props.type ?? 'dimm',
24
- props.mode ?? 'neutral',
27
+ props.mode ?? 'default',
25
28
  { clickable: props.clickable }
26
29
  ])
27
30
 
28
31
  const computedTag = computed(() => {
29
- return props.tag
30
- ? props.tag
31
- : props.clickable ? 'button' : 'span'
32
+ const as = props.as ?? props.tag
33
+ return as || (props.clickable ? 'button' : 'span')
32
34
  })
33
35
 
34
36
  function onClick() {
@@ -82,17 +84,17 @@ function onClick() {
82
84
  border-radius: 16px;
83
85
  padding: 0 12px;
84
86
  line-height: 30px;
85
- font-size: 13px;
87
+ font-size: 14px;
86
88
  }
87
89
 
88
90
  .SPill.dimm {
89
- &.neutral {
90
- border-color: var(--pill-dimm-neutral-border-color);
91
- color: var(--pill-dimm-neutral-text-color);
92
- background-color: var(--pill-dimm-neutral-bg-color);
91
+ &.default {
92
+ border-color: var(--pill-dimm-default-border-color);
93
+ color: var(--pill-dimm-default-text-color);
94
+ background-color: var(--pill-dimm-default-bg-color);
93
95
 
94
- &.clickable:hover { background-color: var(--pill-dimm-neutral-hover-bg-color); }
95
- &.clickable:active { background-color: var(--pill-dimm-neutral-active-bg-color); }
96
+ &.clickable:hover { background-color: var(--pill-dimm-default-hover-bg-color); }
97
+ &.clickable:active { background-color: var(--pill-dimm-default-active-bg-color); }
96
98
  }
97
99
 
98
100
  &.mute {
@@ -104,6 +106,15 @@ function onClick() {
104
106
  &.clickable:active { background-color: var(--pill-dimm-mute-active-bg-color); }
105
107
  }
106
108
 
109
+ &.neutral {
110
+ border-color: var(--pill-dimm-neutral-border-color);
111
+ color: var(--pill-dimm-neutral-text-color);
112
+ background-color: var(--pill-dimm-neutral-bg-color);
113
+
114
+ &.clickable:hover { background-color: var(--pill-dimm-neutral-hover-bg-color); }
115
+ &.clickable:active { background-color: var(--pill-dimm-neutral-active-bg-color); }
116
+ }
117
+
107
118
  &.info {
108
119
  border-color: var(--pill-dimm-info-border-color);
109
120
  color: var(--pill-dimm-info-text-color);
@@ -142,13 +153,13 @@ function onClick() {
142
153
  }
143
154
 
144
155
  .SPill.fill {
145
- &.neutral {
146
- border-color: var(--pill-fill-neutral-border-color);
147
- color: var(--pill-fill-neutral-text-color);
148
- background-color: var(--pill-fill-neutral-bg-color);
156
+ &.default {
157
+ border-color: var(--pill-fill-default-border-color);
158
+ color: var(--pill-fill-default-text-color);
159
+ background-color: var(--pill-fill-default-bg-color);
149
160
 
150
- &.clickable:hover { background-color: var(--pill-fill-neutral-hover-bg-color); }
151
- &.clickable:active { background-color: var(--pill-fill-neutral-active-bg-color); }
161
+ &.clickable:hover { background-color: var(--pill-fill-default-hover-bg-color); }
162
+ &.clickable:active { background-color: var(--pill-fill-default-active-bg-color); }
152
163
  }
153
164
 
154
165
  &.mute {
@@ -160,6 +171,15 @@ function onClick() {
160
171
  &.clickable:active { background-color: var(--pill-fill-mute-active-bg-color); }
161
172
  }
162
173
 
174
+ &.neutral {
175
+ border-color: var(--pill-fill-neutral-border-color);
176
+ color: var(--pill-fill-neutral-text-color);
177
+ background-color: var(--pill-fill-neutral-bg-color);
178
+
179
+ &.clickable:hover { background-color: var(--pill-fill-neutral-hover-bg-color); }
180
+ &.clickable:active { background-color: var(--pill-fill-neutral-active-bg-color); }
181
+ }
182
+
163
183
  &.info {
164
184
  border-color: var(--pill-fill-info-border-color);
165
185
  color: var(--pill-fill-info-text-color);
package/lib/components/SState.vue CHANGED
@@ -2,7 +2,7 @@
2
2
  import { computed } from 'vue'
3
3
 
4
4
  export type Size = 'mini' | 'small' | 'medium' | 'large'
5
- export type Mode = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
5
+ export type Mode = 'default' | 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
6
6
 
7
7
  const props = defineProps<{
8
8
  as?: string
@@ -13,7 +13,7 @@ const props = defineProps<{
13
13
 
14
14
  const classes = computed(() => [
15
15
  props.size ?? 'small',
16
- props.mode ?? 'neutral'
16
+ props.mode ?? 'default'
17
17
  ])
18
18
  </script>
19
19
 
@@ -29,7 +29,6 @@ const classes = computed(() => [
29
29
  display: inline-flex;
30
30
  align-items: center;
31
31
  border: 1px solid var(--c-border-mute-1);
32
- border-radius: 6px;
33
32
  font-weight: 500;
34
33
  white-space: nowrap;
35
34
  background-color: var(--c-bg-mute-1);
@@ -37,11 +36,11 @@ const classes = computed(() => [
37
36
 
38
37
  .SState.mini {
39
38
  gap: 6px;
39
+ border-radius: 10px;
40
40
  padding: 0 6px;
41
41
  height: 20px;
42
42
 
43
43
  .indicator {
44
- border-radius: 2px;
45
44
  width: 8px;
46
45
  height: 8px;
47
46
  }
@@ -52,12 +51,12 @@ const classes = computed(() => [
52
51
  }
53
52
 
54
53
  .SState.small {
55
- gap: 8px;
54
+ gap: 6px;
55
+ border-radius: 12px;
56
56
  padding: 0 8px;
57
57
  height: 24px;
58
58
 
59
59
  .indicator {
60
- border-radius: 3px;
61
60
  width: 10px;
62
61
  height: 10px;
63
62
  }
@@ -68,12 +67,12 @@ const classes = computed(() => [
68
67
  }
69
68
 
70
69
  .SState.medium {
71
- gap: 8px;
70
+ gap: 6px;
71
+ border-radius: 14px;
72
72
  padding: 0 8px;
73
73
  height: 28px;
74
74
 
75
75
  .indicator {
76
- border-radius: 3px;
77
76
  width: 10px;
78
77
  height: 10px;
79
78
  }
@@ -84,12 +83,12 @@ const classes = computed(() => [
84
83
  }
85
84
 
86
85
  .SState.large {
87
- gap: 10px;
86
+ gap: 8px;
87
+ border-radius: 16px;
88
88
  padding: 0 10px;
89
89
  height: 32px;
90
90
 
91
91
  .indicator {
92
- border-radius: 4px;
93
92
  width: 12px;
94
93
  height: 12px;
95
94
  }
@@ -99,28 +98,38 @@ const classes = computed(() => [
99
98
  }
100
99
  }
101
100
 
102
- .SState.neutral {
103
- .indicator { background-color: var(--c-neutral-1); }
101
+ .SState.default {
102
+ .label { color: var(--c-text-1); }
103
+ .indicator { background-color: var(--c-fg-gray-1); }
104
104
  }
105
105
 
106
- .SState.mute {
106
+ .SState.mute {
107
107
  .label { color: var(--c-text-2); }
108
108
  .indicator { background-color: var(--c-fg-gray-1); }
109
109
  }
110
110
 
111
- .SState.info {
111
+ .SState.neutral {
112
+ .label { color: var(--c-text-1); }
113
+ .indicator { background-color: var(--c-neutral-1); }
114
+ }
115
+
116
+ .SState.info {
117
+ .label { color: var(--c-text-1); }
112
118
  .indicator { background-color: var(--c-fg-info-1); }
113
119
  }
114
120
 
115
- .SState.success {
121
+ .SState.success {
122
+ .label { color: var(--c-text-1); }
116
123
  .indicator { background-color: var(--c-fg-success-1); }
117
124
  }
118
125
 
119
- .SState.warning {
126
+ .SState.warning {
127
+ .label { color: var(--c-text-1); }
120
128
  .indicator { background-color: var(--c-fg-warning-1); }
121
129
  }
122
130
 
123
- .SState.danger {
131
+ .SState.danger {
132
+ .label { color: var(--c-text-1); }
124
133
  .indicator { background-color: var(--c-fg-danger-1); }
125
134
  }
126
135
 
@@ -130,6 +139,7 @@ const classes = computed(() => [
130
139
 
131
140
  .indicator {
132
141
  display: block;
142
+ border-radius: 50%;
133
143
  transition: background-color 0.25s;
134
144
  }
135
145
  </style>
package/lib/components/STable.vue CHANGED
@@ -206,7 +206,11 @@ const resizeObserver = useResizeObserver(head, handleResize)
206
206
 
207
207
  function stopObserving() {
208
208
  const orders = ordersToShow.value
209
- colWidths[orders[orders.length - 1]] = 'auto'
209
+ const lastOrder
210
+ = orders[orders.length - 1] === 'actions'
211
+ ? orders[orders.length - 2]
212
+ : orders[orders.length - 1]
213
+ colWidths[lastOrder] = 'auto'
210
214
  resizeObserver.stop()
211
215
  }
212
216
 
package/lib/components/STableCell.vue CHANGED
@@ -102,7 +102,6 @@ const computedCell = computed<TableCell | undefined>(() =>
102
102
  />
103
103
  <STableCellActions
104
104
  v-else-if="computedCell.type === 'actions'"
105
- :value="value"
106
105
  :record="record"
107
106
  :actions="computedCell.actions"
108
107
  />
package/lib/components/STableCellActions.vue CHANGED
@@ -3,7 +3,6 @@ import { type TableCellAction } from '../composables/Table'
3
3
  import SButton from './SButton.vue'
4
4
 
5
5
  defineProps<{
6
- value: any
7
6
  record: any
8
7
  actions: TableCellAction[]
9
8
  }>()
@@ -11,18 +10,19 @@ defineProps<{
11
10
 
12
11
  <template>
13
12
  <div class="STableCellActions">
14
- <SButton
15
- v-for="(action, i) in actions"
16
- :key="i"
17
- size="mini"
18
- type="text"
19
- :mode="action.mode ?? 'mute'"
20
- :icon="action.icon"
21
- :icon-mode="action.iconMode"
22
- :label="action.label"
23
- :label-mode="action.labelMode"
24
- @click="action.onClick(value, record)"
25
- />
13
+ <template v-for="(action, i) in actions" :key="i">
14
+ <SButton
15
+ v-if="action.show == null || action.show(record)"
16
+ size="mini"
17
+ type="text"
18
+ :mode="action.mode ?? 'mute'"
19
+ :icon="action.icon"
20
+ :icon-mode="action.iconMode"
21
+ :label="action.label"
22
+ :label-mode="action.labelMode"
23
+ @click="action.onClick(record)"
24
+ />
25
+ </template>
26
26
  </div>
27
27
  </template>
28
28
 
package/lib/components/SW.vue ADDED
@@ -0,0 +1,3 @@
1
+ <template>
2
+ <wbr><span class="u-nowrap"><slot /></span>
3
+ </template>
package/lib/composables/Table.ts CHANGED
@@ -189,7 +189,8 @@ export interface TableCellAction {
189
189
  iconMode?: Mode
190
190
  label?: string
191
191
  labelMode?: Mode
192
- onClick(value: any, record: any): void
192
+ onClick(record: any): void
193
+ show?(record: any): boolean
193
194
  }
194
195
 
195
196
  export interface TableMenu {
package/lib/styles/bootstrap.css CHANGED
@@ -3,3 +3,4 @@
3
3
  @import "./variables-deprecated";
4
4
  @import "./variables";
5
5
  @import "./base";
6
+ @import "./utilities";
package/lib/styles/utilities.css ADDED
@@ -0,0 +1,3 @@
1
+ .u-nowrap {
2
+ white-space: nowrap;
3
+ }
package/lib/styles/variables.css CHANGED
@@ -228,9 +228,9 @@
228
228
 
229
229
  :root {
230
230
  --c-bg-elv-1: #ffffff;
231
- --c-bg-elv-2: #f9f9f9;
231
+ --c-bg-elv-2: #f5f5f7;
232
232
  --c-bg-elv-3: #ffffff;
233
- --c-bg-elv-4: #f9f9f9;
233
+ --c-bg-elv-4: #fafafa;
234
234
 
235
235
  --c-bg-mute-1: var(--c-gray-4);
236
236
  --c-bg-mute-2: var(--c-gray-5);
@@ -717,11 +717,11 @@
717
717
  * -------------------------------------------------------------------------- */
718
718
 
719
719
  :root {
720
- --pill-dimm-neutral-border-color: var(--c-border-mute-1);
721
- --pill-dimm-neutral-text-color: var(--c-text-1);
722
- --pill-dimm-neutral-bg-color: var(--c-bg-mute-1);
723
- --pill-dimm-neutral-hover-bg-color: var(--c-bg-mute-2);
724
- --pill-dimm-neutral-active-bg-color: var(--c-bg-mute-3);
720
+ --pill-dimm-default-border-color: var(--c-border-mute-1);
721
+ --pill-dimm-default-text-color: var(--c-text-1);
722
+ --pill-dimm-default-bg-color: var(--c-bg-mute-1);
723
+ --pill-dimm-default-hover-bg-color: var(--c-bg-mute-2);
724
+ --pill-dimm-default-active-bg-color: var(--c-bg-mute-3);
725
725
 
726
726
  --pill-dimm-mute-border-color: var(--c-border-mute-1);
727
727
  --pill-dimm-mute-text-color: var(--c-text-2);
@@ -729,6 +729,12 @@
729
729
  --pill-dimm-mute-hover-bg-color: var(--c-bg-mute-2);
730
730
  --pill-dimm-mute-active-bg-color: var(--c-bg-mute-3);
731
731
 
732
+ --pill-dimm-neutral-border-color: var(--c-neutral-1);
733
+ --pill-dimm-neutral-text-color: var(--c-text-inverse-1);
734
+ --pill-dimm-neutral-bg-color: var(--c-neutral-1);
735
+ --pill-dimm-neutral-hover-bg-color: var(--c-neutral-2);
736
+ --pill-dimm-neutral-active-bg-color: var(--c-neutral-3);
737
+
732
738
  --pill-dimm-info-border-color: var(--c-border-info-1);
733
739
  --pill-dimm-info-text-color: var(--c-text-info-1);
734
740
  --pill-dimm-info-bg-color: var(--c-bg-info-dimm-a1);
@@ -753,11 +759,11 @@
753
759
  --pill-dimm-danger-hover-bg-color: var(--c-bg-danger-dimm-a2);
754
760
  --pill-dimm-danger-active-bg-color: var(--c-bg-danger-dimm-a2);
755
761
 
756
- --pill-fill-neutral-border-color: transparent;
757
- --pill-fill-neutral-text-color: var(--c-text-inverse-1);
758
- --pill-fill-neutral-bg-color: var(--c-neutral-1);
759
- --pill-fill-neutral-hover-bg-color: var(--c-neutral-2);
760
- --pill-fill-neutral-active-bg-color: var(--c-neutral-3);
762
+ --pill-fill-default-border-color: transparent;
763
+ --pill-fill-default-text-color: var(--c-text-1);
764
+ --pill-fill-default-bg-color: var(--c-bg-mute-1);
765
+ --pill-fill-default-hover-bg-color: var(--c-bg-mute-2);
766
+ --pill-fill-default-active-bg-color: var(--c-bg-mute-3);
761
767
 
762
768
  --pill-fill-mute-border-color: transparent;
763
769
  --pill-fill-mute-text-color: var(--c-text-2);
@@ -765,6 +771,12 @@
765
771
  --pill-fill-mute-hover-bg-color: var(--c-bg-mute-2);
766
772
  --pill-fill-mute-active-bg-color: var(--c-bg-mute-3);
767
773
 
774
+ --pill-fill-neutral-border-color: transparent;
775
+ --pill-fill-neutral-text-color: var(--c-text-inverse-1);
776
+ --pill-fill-neutral-bg-color: var(--c-neutral-1);
777
+ --pill-fill-neutral-hover-bg-color: var(--c-neutral-2);
778
+ --pill-fill-neutral-active-bg-color: var(--c-neutral-3);
779
+
768
780
  --pill-fill-info-border-color: transparent;
769
781
  --pill-fill-info-text-color: var(--c-white-1);
770
782
  --pill-fill-info-bg-color: var(--c-bg-info-1);
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@globalbrain/sefirot",
3
- "version": "3.2.0",
4
- "packageManager": "pnpm@8.8.0",
3
+ "version": "3.3.0",
4
+ "packageManager": "pnpm@8.10.3",
5
5
  "description": "Vue Components for Global Brain Design System.",
6
6
  "author": "Kia Ishii <ka.ishii@globalbrains.com>",
7
7
  "license": "MIT",
@@ -23,23 +23,23 @@
23
23
  "peerDependencies": {
24
24
  "@iconify-icons/ph": "^1.2.5",
25
25
  "@iconify/vue": "^4.1.1",
26
- "@tanstack/vue-virtual": "3.0.0-beta.60",
27
- "@types/body-scroll-lock": "^3.1.0",
28
- "@types/lodash-es": "^4.17.9",
29
- "@types/markdown-it": "^13.0.2",
26
+ "@tanstack/vue-virtual": "3.0.0-beta.62",
27
+ "@types/body-scroll-lock": "^3.1.2",
28
+ "@types/lodash-es": "^4.17.11",
29
+ "@types/markdown-it": "^13.0.6",
30
30
  "@vuelidate/core": "^2.0.3",
31
31
  "@vuelidate/validators": "^2.0.4",
32
- "@vueuse/core": "^10.5.0",
32
+ "@vueuse/core": "^10.6.0",
33
33
  "body-scroll-lock": "4.0.0-beta.0",
34
- "fuse.js": "^6.6.2",
34
+ "fuse.js": "^7.0.0",
35
35
  "lodash-es": "^4.17.21",
36
36
  "markdown-it": "^13.0.2",
37
37
  "normalize.css": "^8.0.1",
38
- "pinia": "^2.1.6",
38
+ "pinia": "^2.1.7",
39
39
  "postcss": "^8.4.31",
40
40
  "postcss-nested": "^6.0.1",
41
- "v-calendar": "^3.1.1",
42
- "vue": "^3.3.4",
41
+ "v-calendar": "^3.1.2",
42
+ "vue": "^3.3.8",
43
43
  "vue-router": "^4.2.5"
44
44
  },
45
45
  "dependencies": {
@@ -47,44 +47,44 @@
47
47
  },
48
48
  "devDependencies": {
49
49
  "@globalbrain/eslint-config": "^1.5.2",
50
- "@histoire/plugin-vue": "^0.17.1",
50
+ "@histoire/plugin-vue": "^0.17.4",
51
51
  "@iconify-icons/ph": "^1.2.5",
52
52
  "@iconify/vue": "^4.1.1",
53
- "@tanstack/vue-virtual": "3.0.0-beta.60",
54
- "@types/body-scroll-lock": "^3.1.0",
55
- "@types/lodash-es": "^4.17.9",
56
- "@types/markdown-it": "^13.0.2",
57
- "@types/node": "^20.8.3",
58
- "@vitejs/plugin-vue": "^4.4.0",
59
- "@vitest/coverage-v8": "^0.34.6",
53
+ "@tanstack/vue-virtual": "3.0.0-beta.62",
54
+ "@types/body-scroll-lock": "^3.1.2",
55
+ "@types/lodash-es": "^4.17.11",
56
+ "@types/markdown-it": "^13.0.6",
57
+ "@types/node": "^20.9.0",
58
+ "@vitejs/plugin-vue": "^4.4.1",
59
+ "@vitest/coverage-v8": "^1.0.0-beta.4",
60
60
  "@vue/test-utils": "^2.4.1",
61
61
  "@vuelidate/core": "^2.0.3",
62
62
  "@vuelidate/validators": "^2.0.4",
63
- "@vueuse/core": "^10.5.0",
63
+ "@vueuse/core": "^10.6.0",
64
64
  "body-scroll-lock": "4.0.0-beta.0",
65
65
  "chalk": "^4.1.2",
66
66
  "conventional-changelog-cli": "^4.1.0",
67
67
  "enquirer": "^2.4.1",
68
- "eslint": "^8.51.0",
68
+ "eslint": "^8.53.0",
69
69
  "execa": "^5.1.1",
70
- "fuse.js": "^6.6.2",
71
- "happy-dom": "^12.9.0",
72
- "histoire": "^0.17.2",
70
+ "fuse.js": "^7.0.0",
71
+ "happy-dom": "^12.10.3",
72
+ "histoire": "^0.17.4",
73
73
  "lodash-es": "^4.17.21",
74
74
  "markdown-it": "^13.0.2",
75
75
  "normalize.css": "^8.0.1",
76
- "pinia": "^2.1.6",
76
+ "pinia": "^2.1.7",
77
77
  "postcss": "^8.4.31",
78
78
  "postcss-nested": "^6.0.1",
79
79
  "semver": "^7.5.4",
80
80
  "typescript": "~5.2.2",
81
- "v-calendar": "^3.1.1",
82
- "vite": "^4.4.11",
83
- "vitepress": "1.0.0-rc.20",
84
- "vitest": "^0.34.6",
85
- "vue": "^3.3.4",
81
+ "v-calendar": "^3.1.2",
82
+ "vite": "^4.5.0",
83
+ "vitepress": "1.0.0-rc.25",
84
+ "vitest": "^1.0.0-beta.4",
85
+ "vue": "^3.3.8",
86
86
  "vue-router": "^4.2.5",
87
- "vue-tsc": "^1.8.18"
87
+ "vue-tsc": "^1.8.22"
88
88
  },
89
89
  "scripts": {
90
90
  "docs": "vitepress dev docs --port 4000",