@gitlab/ui
Version:
GitLab UI Components
279 lines (268 loc) • 12.9 kB
JavaScript
import Fuse from 'fuse.js';
import GlBadge from '../components/base/badge/badge';
import GlButton from '../components/base/button/button';
import GlSearchBoxByType from '../components/base/search_box_by_type/search_box_by_type';
import GlLink from '../components/base/link/link';
import GlTable from '../components/base/table/table';
import GlPagination from '../components/base/pagination/pagination';
import { GlTooltipDirective } from '../directives/tooltip/tooltip';
import TOKENS_DEFAULT from './build/docs/tokens-tailwind-docs.json';
import TOKENS_DARK from './build/docs/tokens-tailwind-docs.dark.json';
import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
var script = {
name: 'TokensTable',
tokens: {
default: TOKENS_DEFAULT,
dark: TOKENS_DARK
},
components: {
GlBadge,
GlButton,
GlSearchBoxByType,
GlLink,
GlTable,
GlPagination
},
directives: {
GlTooltip: GlTooltipDirective
},
fields: [{
key: 'description',
label: 'Description'
}, {
key: 'value',
label: 'Light mode',
thClass: 'gl-w-1/5'
}, {
key: 'value_dark',
label: 'Dark mode',
thClass: 'gl-w-1/5'
}],
data() {
return {
filter: '',
currentPage: 1,
perPage: 50,
totalFilteredItems: 0
};
},
watch: {
filter: 'resetCurrentPage'
},
methods: {
isColor(type) {
return type === 'color';
},
isAliasValue(value) {
return typeof value === 'string' && value.includes('{');
},
isAliasObject(value) {
return typeof value === 'object' && Object.values(value).some(val => this.isAliasValue(val));
},
getAliasValueName(value) {
if (this.isAliasValue(value)) {
return value.slice(1, -1);
}
return value;
},
getValueLabel(token) {
const value = token.original.$value;
if (this.isAliasObject(value)) {
return this.getAliasValueName(value.default);
}
if (this.isAliasValue(value)) {
return this.getAliasValueName(value);
}
return token.$value;
},
getDarkValueLabel(token) {
const value = token.original.$value;
if (this.isAliasObject(value)) {
return this.getAliasValueName(value.dark);
}
if (this.isAliasValue(value)) {
return this.getAliasValueName(value);
}
return token.$value;
},
transformTokenToTableColumns(token) {
return {
id: token.path.filter(Boolean).join('-'),
name: this.formatTokenName('name', token),
type: token.$type,
value: token.$value,
valueLabel: this.getValueLabel(token),
darkValueLabel: this.getDarkValueLabel(token),
deprecated: token.deprecated ? 'deprecated' : '',
description: token.$description,
className: this.formatContextToClass(token.context),
cssValue: token.cssWithValue,
figmaName: this.formatTokenName('figma', token),
cssName: this.formatTokenName('css', token),
scssName: this.formatTokenName('scss', token)
};
},
filterItems(items, filter) {
if (!filter) return items;
const fuse = new Fuse(items, {
keys: Object.keys(items[0]),
includeScore: true
});
const results = fuse.search(filter);
return results.sort((a, b) => {
if (a.item.deprecated && !b.item.deprecated) return 1;
if (!a.item.deprecated && b.item.deprecated) return -1;
return a.score - b.score;
}).map(_ref => {
let {
item
} = _ref;
return item;
});
},
paginateItems(items, currentPage, perPage) {
const start = (currentPage - 1) * perPage;
return items.slice(start, start + perPage);
},
itemsProvider(_ref2) {
let {
currentPage,
perPage,
filter
} = _ref2;
try {
const items = this.transformTokensToTableRows(this.$options.tokens.default);
const filteredItems = this.filterItems(items, filter);
this.totalFilteredItems = filteredItems.length;
const paginatedFilteredItems = this.paginateItems(filteredItems, currentPage, perPage);
return paginatedFilteredItems;
} catch (e) {
// eslint-disable-next-line no-console
console.error('Failed to provide items', e);
return [];
}
},
transformTokensToTableRows(tokens) {
let context = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
const tokensArray = [];
Object.keys(tokens).forEach(key => {
const token = tokens[key];
if (token.$value) {
tokensArray.push(this.transformTokenToTableColumns({
...token,
context: [...context, key]
}));
} else if (key !== 'colors') {
tokensArray.push(...this.transformTokensToTableRows(token, [...context, key]));
}
});
tokensArray
// Sort tokensArray by id
.sort((a, b) => {
if (a.id < b.id) {
return -1;
}
if (a.id > b.id) {
return 1;
}
return 0;
})
// Sort tokensArray so deprecated items are last
.sort((a, b) => {
if (a.deprecated && !b.deprecated) {
return 1;
}
if (!a.deprecated && b.deprecated) {
return -1;
}
return 0;
});
return tokensArray;
},
formatTokenName(format, token) {
let figmaPrefix = '';
const prefix = token.prefix === false ? '' : 'gl';
switch (format) {
case 'figma':
if (token.filePath.match('contextual')) {
figmaPrefix = '🔒/';
}
if (token.deprecated) {
figmaPrefix = '⚠️ DEPRECATED/';
}
return `${figmaPrefix}${token.path.filter(Boolean).join('-')}`;
case 'css':
return `var(--${[prefix, ...token.path].filter(Boolean).join('-')})`;
case 'scss':
return `$${[prefix, ...token.path].filter(Boolean).join('-')}`;
default:
return token.path.filter(Boolean).join('.');
}
},
formatContextToClass(context) {
const cleanContext = context.filter(segment => segment !== 'color');
if (cleanContext[0] === 'background') {
cleanContext[0] = 'bg';
}
// eslint-disable-next-line @gitlab/tailwind-no-interpolation
return `gl-${cleanContext.join('-')}`;
},
copyToClipboard(value) {
navigator.clipboard.writeText(value);
},
resetCurrentPage() {
this.currentPage = 1;
},
refresh() {
this.$root.$emit('bv::refresh::table', 'tokens-table');
}
}
};
/* script */
const __vue_script__ = script;
/* template */
var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('p',{staticClass:"gl-text-sm gl-text-subtle"},[_vm._v("\n For full token details, see\n "),_c('gl-link',{attrs:{"href":"https://gitlab.com/gitlab-org/gitlab-ui/-/tree/main/src/tokens/build/json","target":"_blank"}},[_vm._v("https://gitlab.com/gitlab-org/gitlab-ui/-/tree/main/src/tokens/build/json")])],1),_vm._v(" "),_c('div',{staticClass:"gl-mb-5 gl-flex gl-items-center gl-gap-3"},[_c('gl-search-box-by-type',{staticClass:"gl-grow",attrs:{"debounce":"250"},model:{value:(_vm.filter),callback:function ($$v) {_vm.filter=$$v;},expression:"filter"}})],1),_vm._v(" "),_c('gl-table',{attrs:{"id":"tokens-table","filter":_vm.filter,"items":_vm.itemsProvider,"fields":_vm.$options.fields,"tbody-tr-attr":function (item) { return ({ id: item.id }); },"current-page":_vm.currentPage,"per-page":_vm.perPage,"hover":"","fixed":"","stacked":"sm"},scopedSlots:_vm._u([{key:"cell(description)",fn:function(ref){
var ref_item = ref.item;
var name = ref_item.name;
var deprecated = ref_item.deprecated;
var description = ref_item.description;
var className = ref_item.className;
var figmaName = ref_item.figmaName;
var cssName = ref_item.cssName;
var scssName = ref_item.scssName;
return [_c('strong',{staticClass:"gl-heading-4 !gl-mb-2 gl-flex gl-items-center gl-gap-3"},[_vm._v("\n "+_vm._s(name)+"\n "),_c('gl-button',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip"}],attrs:{"title":"Copy token name value to clipboard","icon":"copy-to-clipboard","aria-label":"Copy token name value to clipboard","size":"small"},on:{"click":function($event){return _vm.copyToClipboard(name)}}}),_vm._v(" "),(deprecated)?_c('gl-badge',{attrs:{"variant":"danger"}},[_vm._v("Deprecated")]):_vm._e()],1),_vm._v(" "),(description)?_c('p',{staticClass:"gl-mt-3 gl-text-subtle"},[_vm._v("\n "+_vm._s(description)+"\n ")]):_vm._e(),_vm._v(" "),_c('ul',{staticClass:"!gl-m-0 gl-flex gl-list-none gl-flex-col !gl-p-0"},[_c('li',[_c('code',{staticClass:"gl-text-base gl-text-strong"},[_c('span',{staticClass:"gl-inline-block gl-w-12"},[_vm._v("Tailwind:")]),_vm._v(" "+_vm._s(className)+"\n "),_c('gl-button',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip"}],attrs:{"title":"Copy Tailwind class to clipboard","icon":"copy-to-clipboard","aria-label":"Copy Tailwind class to clipboard","size":"small","category":"tertiary"},on:{"click":function($event){return _vm.copyToClipboard(className)}}})],1)]),_vm._v(" "),_c('li',[_c('code',{staticClass:"gl-text-base gl-text-strong"},[_c('span',{staticClass:"gl-inline-block gl-w-12"},[_vm._v("Figma:")]),_vm._v(" "+_vm._s(figmaName)+"\n "),_c('gl-button',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip"}],attrs:{"title":"Copy Figma value to clipboard","icon":"copy-to-clipboard","aria-label":"Copy Figma value to clipboard","size":"small","category":"tertiary"},on:{"click":function($event){return _vm.copyToClipboard(figmaName)}}})],1)]),_vm._v(" "),_c('li',[_c('code',{staticClass:"gl-text-base gl-text-strong"},[_c('span',{staticClass:"gl-inline-block gl-w-12"},[_vm._v("CSS:")]),_vm._v(" "+_vm._s(cssName)+"\n "),_c('gl-button',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip"}],attrs:{"title":"Copy CSS value to clipboard","icon":"copy-to-clipboard","aria-label":"Copy CSS value to clipboard","size":"small","category":"tertiary"},on:{"click":function($event){return _vm.copyToClipboard(cssName)}}})],1)]),_vm._v(" "),_c('li',[_c('code',{staticClass:"gl-text-base gl-text-strong"},[_c('span',{staticClass:"gl-inline-block gl-w-12"},[_vm._v("SCSS:")]),_vm._v(" "+_vm._s(scssName)+"\n "),_c('gl-button',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip"}],attrs:{"title":"Copy SCSS value to clipboard","icon":"copy-to-clipboard","aria-label":"Copy SCSS value to clipboard","size":"small","category":"tertiary"},on:{"click":function($event){return _vm.copyToClipboard(scssName)}}})],1)])])]}},{key:"cell(value)",fn:function(ref){
var ref_item = ref.item;
var type = ref_item.type;
var valueLabel = ref_item.valueLabel;
var cssValue = ref_item.cssValue;
return [_c('div',{staticClass:"gl-flex gl-items-start gl-gap-3"},[(_vm.isColor(type))?_c('div',{staticClass:"gl-border gl-h-5 gl-w-5 gl-rounded-base",style:({ 'background-color': cssValue })}):_vm._e(),_vm._v(" "),_c('code',{staticClass:"gl-min-w-0 gl-text-base gl-text-strong"},[_vm._v(_vm._s(valueLabel))])])]}},{key:"cell(value_dark)",fn:function(ref){
var ref_item = ref.item;
var type = ref_item.type;
var darkValueLabel = ref_item.darkValueLabel;
var cssValue = ref_item.cssValue;
return [_c('div',{staticClass:"gl-flex gl-items-start gl-gap-3"},[(_vm.isColor(type))?_c('div',{staticClass:"gl-dark-scope gl-border gl-h-5 gl-w-5 gl-rounded-base",style:({ 'background-color': cssValue })}):_vm._e(),_vm._v(" "),_c('code',{staticClass:"gl-min-w-0 gl-text-base gl-text-strong"},[_vm._v(_vm._s(darkValueLabel))])])]}}])}),_vm._v(" "),_c('gl-pagination',{attrs:{"align":"center","per-page":_vm.perPage,"total-items":_vm.totalFilteredItems},model:{value:(_vm.currentPage),callback:function ($$v) {_vm.currentPage=$$v;},expression:"currentPage"}})],1)};
var __vue_staticRenderFns__ = [];
/* style */
const __vue_inject_styles__ = undefined;
/* scoped */
const __vue_scope_id__ = undefined;
/* module identifier */
const __vue_module_identifier__ = undefined;
/* functional template */
const __vue_is_functional_template__ = false;
/* style inject */
/* style inject SSR */
/* style inject shadow dom */
const __vue_component__ = /*#__PURE__*/__vue_normalize__(
{ render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
__vue_inject_styles__,
__vue_script__,
__vue_scope_id__,
__vue_is_functional_template__,
__vue_module_identifier__,
false,
undefined,
undefined,
undefined
);
export { __vue_component__ as default };