@gitlab/ui 115.9.2 → 115.10.0

package/dist/tokens/tokens_tailwind_table.js

@@ -1,278 +0,0 @@
-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 };

package/src/tokens/tokens_table.vue

@@ -1,303 +0,0 @@
-<script>
-import Fuse from 'fuse.js';
-import GlBadge from '../components/base/badge/badge.vue';
-import GlButton from '../components/base/button/button.vue';
-import GlCollapsibleListbox from '../components/base/new_dropdowns/listbox/listbox.vue';
-import GlSearchBoxByType from '../components/base/search_box_by_type/search_box_by_type.vue';
-import GlLink from '../components/base/link/link.vue';
-import GlTable from '../components/base/table/table.vue';
-import GlPagination from '../components/base/pagination/pagination.vue';
-import { GlTooltipDirective } from '../directives/tooltip/tooltip';
-import TOKENS_DEFAULT from './build/json/tokens.json';
-import TOKENS_DARK from './build/json/tokens.dark.json';
-
-export default {
-  name: 'TokensTable',
-  tokens: {
-    default: TOKENS_DEFAULT,
-    dark: TOKENS_DARK,
-  },
-  components: {
-    GlBadge,
-    GlButton,
-    GlCollapsibleListbox,
-    GlSearchBoxByType,
-    GlLink,
-    GlTable,
-    GlPagination,
-  },
-  directives: {
-    GlTooltip: GlTooltipDirective,
-  },
-  fields: [
-    {
-      key: 'description',
-      label: 'Description',
-    },
-    {
-      key: 'value',
-      label: 'Value',
-    },
-  ],
-  data() {
-    return {
-      filter: '',
-      platforms: [
-        {
-          value: 'name',
-          text: 'Name',
-        },
-        {
-          value: 'figma',
-          text: 'Figma',
-        },
-        {
-          value: 'css',
-          text: 'CSS',
-        },
-        {
-          value: 'scss',
-          text: 'SCSS',
-        },
-      ],
-      modes: [
-        {
-          value: 'default',
-          text: 'Default',
-        },
-        {
-          value: 'dark',
-          text: 'Dark',
-        },
-      ],
-      selectedPlatform: 'name',
-      selectedMode: 'default',
-      currentPage: 1,
-      perPage: 50,
-      totalFilteredItems: 0,
-    };
-  },
-  watch: {
-    selectedPlatform: 'refresh',
-    selectedMode: 'refresh',
-    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[this.selectedMode]);
-      }
-      if (this.isAliasValue(value)) {
-        return this.getAliasValueName(value);
-      }
-      return token.$value;
-    },
-    transformTokenToTableColumns(token) {
-      return {
-        id: token.path.filter(Boolean).join('-'),
-        name: this.formatTokenName(this.selectedPlatform, token),
-        type: token.$type,
-        value: token.$value,
-        valueLabel: this.getValueLabel(token),
-        deprecated: token.$deprecated ? 'deprecated' : '',
-        description: token.$description,
-      };
-    },
-    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(({ item }) => item);
-    },
-    paginateItems(items, currentPage, perPage) {
-      const start = (currentPage - 1) * perPage;
-      return items.slice(start, start + perPage);
-    },
-    itemsProvider({ currentPage, perPage, filter }) {
-      try {
-        const items = this.transformTokensToTableRows(this.$options.tokens[this.selectedMode]);
-        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) {
-      const tokensArray = [];
-
-      Object.keys(tokens).forEach((key) => {
-        const token = tokens[key];
-        if (token.$value) {
-          tokensArray.push(this.transformTokenToTableColumns(token));
-        } else {
-          tokensArray.push(...this.transformTokensToTableRows(token));
-        }
-      });
-
-      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('.');
-      }
-    },
-    getTokenName(token) {
-      return `$${token.prefix === false ? '' : 'gl-'}${token.path.filter(Boolean).join('-')}`;
-    },
-    copyToClipboard(value) {
-      navigator.clipboard.writeText(value);
-    },
-    resetCurrentPage() {
-      this.currentPage = 1;
-    },
-    refresh() {
-      this.$root.$emit('bv::refresh::table', 'tokens-table');
-    },
-  },
-};
-</script>
-
-<template>
-  <div>
-    <p class="gl-text-sm gl-text-subtle">
-      For full token details, see
-      <gl-link
-        href="https://gitlab.com/gitlab-org/gitlab-ui/-/tree/main/src/tokens/build/json"
-        target="_blank"
-        >https://gitlab.com/gitlab-org/gitlab-ui/-/tree/main/src/tokens/build/json</gl-link
-      >
-    </p>
-    <div class="gl-mb-5 gl-flex gl-items-center gl-gap-3">
-      <gl-search-box-by-type v-model="filter" debounce="250" class="gl-grow" />
-      <gl-collapsible-listbox
-        v-model="selectedPlatform"
-        :selected="selectedPlatform"
-        :items="platforms"
-        @search="query = $event"
-      />
-      <gl-collapsible-listbox
-        v-model="selectedMode"
-        :selected="selectedMode"
-        :items="modes"
-        @search="query = $event"
-      />
-    </div>
-    <gl-table
-      id="tokens-table"
-      :filter="filter"
-      :items="itemsProvider"
-      :fields="$options.fields"
-      :tbody-tr-attr="(item) => ({ id: item.id })"
-      :current-page="currentPage"
-      :per-page="perPage"
-      hover
-      fixed
-      stacked="sm"
-    >
-      <template #cell(description)="{ item: { name, deprecated, description } }">
-        <code class="gl-text-base gl-text-strong">
-          {{ name }}
-          <gl-button
-            v-gl-tooltip
-            :title="`Copy ${selectedPlatform} value to clipboard`"
-            icon="copy-to-clipboard"
-            :aria-label="`Copy ${selectedPlatform} value to clipboard`"
-            size="small"
-            @click="copyToClipboard(name)"
-          />
-        </code>
-        <gl-badge v-if="deprecated" variant="danger">Deprecated</gl-badge>
-        <div v-if="description" class="gl-mt-3 gl-text-subtle">
-          {{ description }}
-        </div>
-      </template>
-      <template #cell(value)="{ item: { type, value, valueLabel } }">
-        <div class="gl-flex gl-items-center gl-gap-3">
-          <div
-            v-if="isColor(type)"
-            class="gl-h-5 gl-w-5 gl-rounded-base"
-            :style="{ 'background-color': value }"
-          ></div>
-          <code class="gl-min-w-0 gl-text-base gl-text-strong">{{ valueLabel }}</code>
-        </div>
-      </template>
-    </gl-table>
-
-    <gl-pagination
-      v-model="currentPage"
-      align="center"
-      :per-page="perPage"
-      :total-items="totalFilteredItems"
-    />
-  </div>
-</template>