@gitlab/ui 32.47.0 → 32.51.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 (138) hide show
  1. package/CHANGELOG.md +28 -0
  2. package/dist/components/base/avatar_labeled/avatar_labeled.documentation.js +2 -9
  3. package/dist/components/base/avatars_inline/avatars_inline.documentation.js +2 -5
  4. package/dist/components/base/form/form.documentation.js +1 -5
  5. package/dist/components/base/form/form_radio/form_radio.documentation.js +2 -33
  6. package/dist/components/base/form/form_radio/form_radio.js +15 -2
  7. package/dist/components/base/form/form_select/form_select.documentation.js +2 -17
  8. package/dist/components/base/keyset_pagination/keyset_pagination.documentation.js +2 -84
  9. package/dist/components/base/keyset_pagination/keyset_pagination.js +42 -0
  10. package/dist/components/base/modal/modal.documentation.js +2 -32
  11. package/dist/components/base/modal/modal.js +15 -1
  12. package/dist/components/charts/gauge/gauge.documentation.js +2 -6
  13. package/dist/components/utilities/intersperse/intersperse.documentation.js +2 -5
  14. package/dist/utility_classes.css +1 -1
  15. package/dist/utility_classes.css.map +1 -1
  16. package/documentation/documented_stories.js +9 -0
  17. package/package.json +3 -3
  18. package/scss_to_js/scss_variables.js +2 -0
  19. package/scss_to_js/scss_variables.json +10 -0
  20. package/src/components/base/avatar_labeled/avatar_labeled.documentation.js +0 -9
  21. package/src/components/base/avatar_labeled/avatar_labeled.md +2 -5
  22. package/src/components/base/avatar_labeled/avatar_labeled.stories.js +68 -62
  23. package/src/components/base/avatar_labeled/avatar_labeled.vue +1 -0
  24. package/src/components/base/avatars_inline/avatars_inline.documentation.js +0 -2
  25. package/src/components/base/avatars_inline/avatars_inline.md +1 -3
  26. package/src/components/base/avatars_inline/avatars_inline.stories.js +49 -44
  27. package/src/components/base/form/form.documentation.js +0 -3
  28. package/src/components/base/form/form.stories.js +99 -14
  29. package/src/components/base/form/form_radio/form_radio.documentation.js +0 -31
  30. package/src/components/base/form/form_radio/form_radio.md +7 -14
  31. package/src/components/base/form/form_radio/form_radio.stories.js +40 -28
  32. package/src/components/base/form/form_radio/form_radio.vue +26 -1
  33. package/src/components/base/form/form_select/form_select.documentation.js +0 -19
  34. package/src/components/base/form/form_select/form_select.md +0 -2
  35. package/src/components/base/form/form_select/form_select.stories.js +98 -80
  36. package/src/components/base/keyset_pagination/keyset_pagination.documentation.js +0 -99
  37. package/src/components/base/keyset_pagination/keyset_pagination.md +0 -2
  38. package/src/components/base/keyset_pagination/keyset_pagination.stories.js +60 -58
  39. package/src/components/base/keyset_pagination/keyset_pagination.vue +35 -1
  40. package/src/components/base/modal/modal.documentation.js +0 -42
  41. package/src/components/base/modal/modal.md +2 -7
  42. package/src/components/base/modal/modal.stories.js +107 -85
  43. package/src/components/base/modal/modal.vue +73 -32
  44. package/src/components/charts/gauge/gauge.documentation.js +0 -3
  45. package/src/components/charts/gauge/gauge.md +0 -2
  46. package/src/components/charts/gauge/gauge.stories.js +70 -86
  47. package/src/components/utilities/intersperse/intersperse.documentation.js +0 -2
  48. package/src/components/utilities/intersperse/intersperse.md +0 -2
  49. package/src/components/utilities/intersperse/intersperse.stories.js +38 -38
  50. package/src/scss/utilities.scss +16 -0
  51. package/src/scss/utility-mixins/sizing.scss +8 -0
  52. package/src/scss/variables.scss +2 -0
  53. package/dist/components/base/avatar_labeled/examples/avatar.labeled.example.js +0 -38
  54. package/dist/components/base/avatar_labeled/examples/avatar.labeled_badges.example.js +0 -38
  55. package/dist/components/base/avatar_labeled/examples/avatar.labeled_links.example.js +0 -38
  56. package/dist/components/base/avatar_labeled/examples/avatar.labeled_tooltip.example.js +0 -38
  57. package/dist/components/base/avatar_labeled/examples/index.js +0 -31
  58. package/dist/components/base/avatars_inline/examples/avatars.inline.example.js +0 -58
  59. package/dist/components/base/avatars_inline/examples/avatars.inline_large.example.js +0 -58
  60. package/dist/components/base/avatars_inline/examples/avatars.inline_links_and_tooltips.example.js +0 -70
  61. package/dist/components/base/avatars_inline/examples/avatars.inline_links_and_tooltips_badge.example.js +0 -70
  62. package/dist/components/base/avatars_inline/examples/index.js +0 -31
  63. package/dist/components/base/form/examples/form.basic.example.js +0 -76
  64. package/dist/components/base/form/examples/form.edit.example.js +0 -66
  65. package/dist/components/base/form/examples/form.inline.example.js +0 -62
  66. package/dist/components/base/form/examples/form.novalidate.example.js +0 -61
  67. package/dist/components/base/form/examples/index.js +0 -27
  68. package/dist/components/base/form/form_radio/examples/form_radio.basic.example.js +0 -48
  69. package/dist/components/base/form/form_radio/examples/form_radio.checked_disabled.example.js +0 -48
  70. package/dist/components/base/form/form_radio/examples/index.js +0 -19
  71. package/dist/components/base/form/form_select/examples/form_select.basic.example.js +0 -55
  72. package/dist/components/base/form/form_select/examples/form_select.disabled.example.js +0 -55
  73. package/dist/components/base/form/form_select/examples/form_select.manual_options.example.js +0 -48
  74. package/dist/components/base/form/form_select/examples/form_select.mixed_options.example.js +0 -55
  75. package/dist/components/base/form/form_select/examples/index.js +0 -27
  76. package/dist/components/base/keyset_pagination/examples/index.js +0 -37
  77. package/dist/components/base/keyset_pagination/examples/keyset_pagination.basic.example.js +0 -51
  78. package/dist/components/base/keyset_pagination/examples/keyset_pagination.events.example.js +0 -64
  79. package/dist/components/base/keyset_pagination/examples/keyset_pagination.internationalization.example.js +0 -59
  80. package/dist/components/base/keyset_pagination/examples/keyset_pagination.links.example.js +0 -51
  81. package/dist/components/base/keyset_pagination/examples/keyset_pagination.slots.example.js +0 -51
  82. package/dist/components/base/modal/examples/index.js +0 -31
  83. package/dist/components/base/modal/examples/modal.basic.example.js +0 -62
  84. package/dist/components/base/modal/examples/modal.disabled.example.js +0 -89
  85. package/dist/components/base/modal/examples/modal.sizes.example.js +0 -62
  86. package/dist/components/charts/gauge/examples/gauge.basic.example.js +0 -38
  87. package/dist/components/charts/gauge/examples/gauge.no_thresholds.example.js +0 -38
  88. package/dist/components/charts/gauge/examples/gauge.no_value.example.js +0 -38
  89. package/dist/components/charts/gauge/examples/gauge.with_text.example.js +0 -38
  90. package/dist/components/charts/gauge/examples/index.js +0 -31
  91. package/dist/components/utilities/intersperse/examples/index.js +0 -31
  92. package/dist/components/utilities/intersperse/examples/intersperse.custom_last_separator.example.js +0 -38
  93. package/dist/components/utilities/intersperse/examples/intersperse.custom_last_separator_two_items.example.js +0 -38
  94. package/dist/components/utilities/intersperse/examples/intersperse.custom_separator.example.js +0 -38
  95. package/dist/components/utilities/intersperse/examples/intersperse.default.example.js +0 -38
  96. package/src/components/base/avatar_labeled/examples/avatar.labeled.example.vue +0 -8
  97. package/src/components/base/avatar_labeled/examples/avatar.labeled_badges.example.vue +0 -17
  98. package/src/components/base/avatar_labeled/examples/avatar.labeled_links.example.vue +0 -10
  99. package/src/components/base/avatar_labeled/examples/avatar.labeled_tooltip.example.vue +0 -10
  100. package/src/components/base/avatar_labeled/examples/index.js +0 -36
  101. package/src/components/base/avatars_inline/examples/avatars.inline.example.vue +0 -18
  102. package/src/components/base/avatars_inline/examples/avatars.inline_large.example.vue +0 -18
  103. package/src/components/base/avatars_inline/examples/avatars.inline_links_and_tooltips.example.vue +0 -24
  104. package/src/components/base/avatars_inline/examples/avatars.inline_links_and_tooltips_badge.example.vue +0 -31
  105. package/src/components/base/avatars_inline/examples/index.js +0 -36
  106. package/src/components/base/form/examples/form.basic.example.vue +0 -73
  107. package/src/components/base/form/examples/form.edit.example.vue +0 -37
  108. package/src/components/base/form/examples/form.inline.example.vue +0 -36
  109. package/src/components/base/form/examples/form.novalidate.example.vue +0 -30
  110. package/src/components/base/form/examples/index.js +0 -32
  111. package/src/components/base/form/form_radio/examples/form_radio.basic.example.vue +0 -16
  112. package/src/components/base/form/form_radio/examples/form_radio.checked_disabled.example.vue +0 -13
  113. package/src/components/base/form/form_radio/examples/index.js +0 -22
  114. package/src/components/base/form/form_select/examples/form_select.basic.example.vue +0 -17
  115. package/src/components/base/form/form_select/examples/form_select.disabled.example.vue +0 -17
  116. package/src/components/base/form/form_select/examples/form_select.manual_options.example.vue +0 -17
  117. package/src/components/base/form/form_select/examples/form_select.mixed_options.example.vue +0 -21
  118. package/src/components/base/form/form_select/examples/index.js +0 -32
  119. package/src/components/base/keyset_pagination/examples/index.js +0 -43
  120. package/src/components/base/keyset_pagination/examples/keyset_pagination.basic.example.vue +0 -16
  121. package/src/components/base/keyset_pagination/examples/keyset_pagination.events.example.vue +0 -29
  122. package/src/components/base/keyset_pagination/examples/keyset_pagination.internationalization.example.vue +0 -23
  123. package/src/components/base/keyset_pagination/examples/keyset_pagination.links.example.vue +0 -20
  124. package/src/components/base/keyset_pagination/examples/keyset_pagination.slots.example.vue +0 -23
  125. package/src/components/base/modal/examples/index.js +0 -39
  126. package/src/components/base/modal/examples/modal.basic.example.vue +0 -39
  127. package/src/components/base/modal/examples/modal.disabled.example.vue +0 -58
  128. package/src/components/base/modal/examples/modal.sizes.example.vue +0 -61
  129. package/src/components/charts/gauge/examples/gauge.basic.example.vue +0 -5
  130. package/src/components/charts/gauge/examples/gauge.no_thresholds.example.vue +0 -5
  131. package/src/components/charts/gauge/examples/gauge.no_value.example.vue +0 -5
  132. package/src/components/charts/gauge/examples/gauge.with_text.example.vue +0 -12
  133. package/src/components/charts/gauge/examples/index.js +0 -36
  134. package/src/components/utilities/intersperse/examples/index.js +0 -36
  135. package/src/components/utilities/intersperse/examples/intersperse.custom_last_separator.example.vue +0 -7
  136. package/src/components/utilities/intersperse/examples/intersperse.custom_last_separator_two_items.example.vue +0 -6
  137. package/src/components/utilities/intersperse/examples/intersperse.custom_separator.example.vue +0 -7
  138. package/src/components/utilities/intersperse/examples/intersperse.default.example.vue +0 -7
@@ -1,62 +0,0 @@
1
- import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
2
-
3
- var script = {
4
- computed: {
5
- primaryProps() {
6
- return {
7
- text: 'Okay'
8
- };
9
- },
10
-
11
- secondaryProps() {
12
- return {
13
- text: 'Secondary'
14
- };
15
- },
16
-
17
- cancelProps() {
18
- return {
19
- text: 'Cancel'
20
- };
21
- }
22
-
23
- }
24
- };
25
-
26
- /* script */
27
- const __vue_script__ = script;
28
-
29
- /* template */
30
- var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('gl-button',{directives:[{name:"gl-modal-directive",rawName:"v-gl-modal-directive",value:('small-modal-id'),expression:"'small-modal-id'"}],attrs:{"variant":"confirm"}},[_vm._v("Small Modal")]),_vm._v(" "),_c('gl-button',{directives:[{name:"gl-modal-directive",rawName:"v-gl-modal-directive",value:('medium-modal-id'),expression:"'medium-modal-id'"}],attrs:{"variant":"confirm"}},[_vm._v("Default Modal")]),_vm._v(" "),_c('gl-button',{directives:[{name:"gl-modal-directive",rawName:"v-gl-modal-directive",value:('large-modal-id'),expression:"'large-modal-id'"}],attrs:{"variant":"confirm"}},[_vm._v("Large Modal")]),_vm._v(" "),_c('gl-modal',{attrs:{"modal-id":"small-modal-id","title":"Example title","no-fade":"","action-primary":_vm.primaryProps,"action-secondary":_vm.secondaryProps,"action-cancel":_vm.cancelProps,"size":"sm"}},[_c('p',[_vm._v("Small modal: 512px")])]),_vm._v(" "),_c('gl-modal',{attrs:{"modal-id":"medium-modal-id","title":"Example title","no-fade":"","action-primary":_vm.primaryProps,"action-secondary":_vm.secondaryProps,"action-cancel":_vm.cancelProps}},[_c('p',[_vm._v("Medium modal: 768px (default)")])]),_vm._v(" "),_c('gl-modal',{attrs:{"modal-id":"large-modal-id","title":"Example title","no-fade":"","action-primary":_vm.primaryProps,"action-secondary":_vm.secondaryProps,"action-cancel":_vm.cancelProps,"size":"lg"}},[_c('p',[_vm._v("Large modal: 990px")])])],1)};
31
- var __vue_staticRenderFns__ = [];
32
-
33
- /* style */
34
- const __vue_inject_styles__ = undefined;
35
- /* scoped */
36
- const __vue_scope_id__ = undefined;
37
- /* module identifier */
38
- const __vue_module_identifier__ = undefined;
39
- /* functional template */
40
- const __vue_is_functional_template__ = false;
41
- /* style inject */
42
-
43
- /* style inject SSR */
44
-
45
- /* style inject shadow dom */
46
-
47
-
48
-
49
- const __vue_component__ = __vue_normalize__(
50
- { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
51
- __vue_inject_styles__,
52
- __vue_script__,
53
- __vue_scope_id__,
54
- __vue_is_functional_template__,
55
- __vue_module_identifier__,
56
- false,
57
- undefined,
58
- undefined,
59
- undefined
60
- );
61
-
62
- export default __vue_component__;
@@ -1,38 +0,0 @@
1
- import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
2
-
3
- /* script */
4
-
5
- /* template */
6
- var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('gl-gauge-chart',{attrs:{"value":48,"min":0,"max":100,"thresholds":[38, 82],"split-number":10}})],1)};
7
- var __vue_staticRenderFns__ = [];
8
-
9
- /* style */
10
- const __vue_inject_styles__ = undefined;
11
- /* scoped */
12
- const __vue_scope_id__ = undefined;
13
- /* module identifier */
14
- const __vue_module_identifier__ = undefined;
15
- /* functional template */
16
- const __vue_is_functional_template__ = false;
17
- /* style inject */
18
-
19
- /* style inject SSR */
20
-
21
- /* style inject shadow dom */
22
-
23
-
24
-
25
- const __vue_component__ = __vue_normalize__(
26
- { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
27
- __vue_inject_styles__,
28
- {},
29
- __vue_scope_id__,
30
- __vue_is_functional_template__,
31
- __vue_module_identifier__,
32
- false,
33
- undefined,
34
- undefined,
35
- undefined
36
- );
37
-
38
- export default __vue_component__;
@@ -1,38 +0,0 @@
1
- import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
2
-
3
- /* script */
4
-
5
- /* template */
6
- var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('gl-gauge-chart',{attrs:{"value":48,"min":0,"max":100,"split-number":10}})],1)};
7
- var __vue_staticRenderFns__ = [];
8
-
9
- /* style */
10
- const __vue_inject_styles__ = undefined;
11
- /* scoped */
12
- const __vue_scope_id__ = undefined;
13
- /* module identifier */
14
- const __vue_module_identifier__ = undefined;
15
- /* functional template */
16
- const __vue_is_functional_template__ = false;
17
- /* style inject */
18
-
19
- /* style inject SSR */
20
-
21
- /* style inject shadow dom */
22
-
23
-
24
-
25
- const __vue_component__ = __vue_normalize__(
26
- { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
27
- __vue_inject_styles__,
28
- {},
29
- __vue_scope_id__,
30
- __vue_is_functional_template__,
31
- __vue_module_identifier__,
32
- false,
33
- undefined,
34
- undefined,
35
- undefined
36
- );
37
-
38
- export default __vue_component__;
@@ -1,38 +0,0 @@
1
- import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
2
-
3
- /* script */
4
-
5
- /* template */
6
- var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('gl-gauge-chart',{attrs:{"min":0,"max":100,"thresholds":[38, 82],"split-number":10}})],1)};
7
- var __vue_staticRenderFns__ = [];
8
-
9
- /* style */
10
- const __vue_inject_styles__ = undefined;
11
- /* scoped */
12
- const __vue_scope_id__ = undefined;
13
- /* module identifier */
14
- const __vue_module_identifier__ = undefined;
15
- /* functional template */
16
- const __vue_is_functional_template__ = false;
17
- /* style inject */
18
-
19
- /* style inject SSR */
20
-
21
- /* style inject shadow dom */
22
-
23
-
24
-
25
- const __vue_component__ = __vue_normalize__(
26
- { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
27
- __vue_inject_styles__,
28
- {},
29
- __vue_scope_id__,
30
- __vue_is_functional_template__,
31
- __vue_module_identifier__,
32
- false,
33
- undefined,
34
- undefined,
35
- undefined
36
- );
37
-
38
- export default __vue_component__;
@@ -1,38 +0,0 @@
1
- import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
2
-
3
- /* script */
4
-
5
- /* template */
6
- var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('gl-gauge-chart',{attrs:{"value":48,"text":"48Mbps","min":0,"max":100,"thresholds":[38, 82],"split-number":10}})],1)};
7
- var __vue_staticRenderFns__ = [];
8
-
9
- /* style */
10
- const __vue_inject_styles__ = undefined;
11
- /* scoped */
12
- const __vue_scope_id__ = undefined;
13
- /* module identifier */
14
- const __vue_module_identifier__ = undefined;
15
- /* functional template */
16
- const __vue_is_functional_template__ = false;
17
- /* style inject */
18
-
19
- /* style inject SSR */
20
-
21
- /* style inject shadow dom */
22
-
23
-
24
-
25
- const __vue_component__ = __vue_normalize__(
26
- { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
27
- __vue_inject_styles__,
28
- {},
29
- __vue_scope_id__,
30
- __vue_is_functional_template__,
31
- __vue_module_identifier__,
32
- false,
33
- undefined,
34
- undefined,
35
- undefined
36
- );
37
-
38
- export default __vue_component__;
@@ -1,31 +0,0 @@
1
- import BasicExample from './gauge.basic.example';
2
- import NoThresholdsExample from './gauge.no_thresholds.example';
3
- import NoValueExample from './gauge.no_value.example';
4
- import WithTextExample from './gauge.with_text.example';
5
-
6
- var index = [{
7
- name: 'Basic',
8
- items: [{
9
- id: 'gauge-basic',
10
- name: 'Basic',
11
- description: 'Basic Gauge',
12
- component: BasicExample
13
- }, {
14
- id: 'gauge-no-thresholds',
15
- name: 'No thresholds set',
16
- description: 'Gauge with no thresholds set',
17
- component: NoThresholdsExample
18
- }, {
19
- id: 'gauge-no-value',
20
- name: 'No value set',
21
- description: 'Gauge with no value set',
22
- component: NoValueExample
23
- }, {
24
- id: 'gauge-with-text',
25
- name: 'With text set',
26
- description: 'Gauge with custom text set',
27
- component: WithTextExample
28
- }]
29
- }];
30
-
31
- export default index;
@@ -1,31 +0,0 @@
1
- import IntersperseCustomLastSeparator from './intersperse.custom_last_separator.example';
2
- import IntersperseCustomLastSeparatorTwoItems from './intersperse.custom_last_separator_two_items.example';
3
- import IntersperseCustomSeparator from './intersperse.custom_separator.example';
4
- import Intersperse from './intersperse.default.example';
5
-
6
- var index = [{
7
- name: 'Basic',
8
- items: [{
9
- id: 'intersperse-default',
10
- name: 'Default Intersperse',
11
- description: 'Default intersperse usage',
12
- component: Intersperse
13
- }, {
14
- id: 'intersperse-custom-separator',
15
- name: 'Intersperse with custom separator',
16
- description: 'Set a custom separator',
17
- component: IntersperseCustomSeparator
18
- }, {
19
- id: 'intersperse-custom-last-separator',
20
- name: 'Intersperse with custom last separator',
21
- description: 'Set a custom last separator',
22
- component: IntersperseCustomLastSeparator
23
- }, {
24
- id: 'intersperse-custom-last-separator-two-items',
25
- name: 'Intersperse with custom last separator and two items',
26
- description: 'Set a custom last separator on two items',
27
- component: IntersperseCustomLastSeparatorTwoItems
28
- }]
29
- }];
30
-
31
- export default index;
@@ -1,38 +0,0 @@
1
- import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
2
-
3
- /* script */
4
-
5
- /* template */
6
- var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-intersperse',{attrs:{"last-separator":" and "}},[_c('span',[_vm._v("Item 1")]),_vm._v(" "),_c('span',[_vm._v("Item 2")]),_vm._v(" "),_c('span',[_vm._v("Item 3")])])};
7
- var __vue_staticRenderFns__ = [];
8
-
9
- /* style */
10
- const __vue_inject_styles__ = undefined;
11
- /* scoped */
12
- const __vue_scope_id__ = undefined;
13
- /* module identifier */
14
- const __vue_module_identifier__ = undefined;
15
- /* functional template */
16
- const __vue_is_functional_template__ = false;
17
- /* style inject */
18
-
19
- /* style inject SSR */
20
-
21
- /* style inject shadow dom */
22
-
23
-
24
-
25
- const __vue_component__ = __vue_normalize__(
26
- { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
27
- __vue_inject_styles__,
28
- {},
29
- __vue_scope_id__,
30
- __vue_is_functional_template__,
31
- __vue_module_identifier__,
32
- false,
33
- undefined,
34
- undefined,
35
- undefined
36
- );
37
-
38
- export default __vue_component__;
@@ -1,38 +0,0 @@
1
- import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
2
-
3
- /* script */
4
-
5
- /* template */
6
- var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-intersperse',{attrs:{"last-separator":" and "}},[_c('span',[_vm._v("Item 1")]),_vm._v(" "),_c('span',[_vm._v("Item 2")])])};
7
- var __vue_staticRenderFns__ = [];
8
-
9
- /* style */
10
- const __vue_inject_styles__ = undefined;
11
- /* scoped */
12
- const __vue_scope_id__ = undefined;
13
- /* module identifier */
14
- const __vue_module_identifier__ = undefined;
15
- /* functional template */
16
- const __vue_is_functional_template__ = false;
17
- /* style inject */
18
-
19
- /* style inject SSR */
20
-
21
- /* style inject shadow dom */
22
-
23
-
24
-
25
- const __vue_component__ = __vue_normalize__(
26
- { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
27
- __vue_inject_styles__,
28
- {},
29
- __vue_scope_id__,
30
- __vue_is_functional_template__,
31
- __vue_module_identifier__,
32
- false,
33
- undefined,
34
- undefined,
35
- undefined
36
- );
37
-
38
- export default __vue_component__;
@@ -1,38 +0,0 @@
1
- import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
2
-
3
- /* script */
4
-
5
- /* template */
6
- var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-intersperse',{attrs:{"separator":"/"}},[_c('span',[_vm._v("Item 1")]),_vm._v(" "),_c('span',[_vm._v("Item 2")]),_vm._v(" "),_c('span',[_vm._v("Item 3")])])};
7
- var __vue_staticRenderFns__ = [];
8
-
9
- /* style */
10
- const __vue_inject_styles__ = undefined;
11
- /* scoped */
12
- const __vue_scope_id__ = undefined;
13
- /* module identifier */
14
- const __vue_module_identifier__ = undefined;
15
- /* functional template */
16
- const __vue_is_functional_template__ = false;
17
- /* style inject */
18
-
19
- /* style inject SSR */
20
-
21
- /* style inject shadow dom */
22
-
23
-
24
-
25
- const __vue_component__ = __vue_normalize__(
26
- { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
27
- __vue_inject_styles__,
28
- {},
29
- __vue_scope_id__,
30
- __vue_is_functional_template__,
31
- __vue_module_identifier__,
32
- false,
33
- undefined,
34
- undefined,
35
- undefined
36
- );
37
-
38
- export default __vue_component__;
@@ -1,38 +0,0 @@
1
- import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
2
-
3
- /* script */
4
-
5
- /* template */
6
- var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-intersperse',[_c('span',[_vm._v("Item 1")]),_vm._v(" "),_c('span',[_vm._v("Item 2")]),_vm._v(" "),_c('span',[_vm._v("Item 3")])])};
7
- var __vue_staticRenderFns__ = [];
8
-
9
- /* style */
10
- const __vue_inject_styles__ = undefined;
11
- /* scoped */
12
- const __vue_scope_id__ = undefined;
13
- /* module identifier */
14
- const __vue_module_identifier__ = undefined;
15
- /* functional template */
16
- const __vue_is_functional_template__ = false;
17
- /* style inject */
18
-
19
- /* style inject SSR */
20
-
21
- /* style inject shadow dom */
22
-
23
-
24
-
25
- const __vue_component__ = __vue_normalize__(
26
- { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
27
- __vue_inject_styles__,
28
- {},
29
- __vue_scope_id__,
30
- __vue_is_functional_template__,
31
- __vue_module_identifier__,
32
- false,
33
- undefined,
34
- undefined,
35
- undefined
36
- );
37
-
38
- export default __vue_component__;
@@ -1,8 +0,0 @@
1
- <template>
2
- <gl-avatar-labeled
3
- :size="32"
4
- src="https://assets.gitlab-static.net/uploads/-/system/group/avatar/9970/logo-extra-whitespace.png?width=64"
5
- label="GitLab User"
6
- sub-label="gitlab"
7
- />
8
- </template>
@@ -1,17 +0,0 @@
1
- <template>
2
- <gl-avatar-labeled
3
- :size="32"
4
- src="https://assets.gitlab-static.net/uploads/-/system/group/avatar/9970/logo-extra-whitespace.png?width=64"
5
- label="GitLab User"
6
- sub-label="gitlab"
7
- >
8
- <template #meta>
9
- <div class="gl-p-1">
10
- <gl-badge class="gl-display-flex!" size="sm" variant="info">2FA</gl-badge>
11
- </div>
12
- <div class="gl-p-1">
13
- <gl-badge class="gl-display-flex!" size="sm" variant="danger">Blocked</gl-badge>
14
- </div>
15
- </template>
16
- </gl-avatar-labeled>
17
- </template>
@@ -1,10 +0,0 @@
1
- <template>
2
- <gl-avatar-labeled
3
- :size="32"
4
- src="https://assets.gitlab-static.net/uploads/-/system/group/avatar/9970/logo-extra-whitespace.png?width=64"
5
- label="GitLab User"
6
- sub-label="gitlab@example.com"
7
- label-link="#"
8
- sub-label-link="mailto:#"
9
- />
10
- </template>
@@ -1,10 +0,0 @@
1
- <template>
2
- <gl-avatar-labeled
3
- v-gl-tooltip="{ placement: 'bottom' }"
4
- :size="32"
5
- src="https://assets.gitlab-static.net/uploads/-/system/group/avatar/9970/logo-extra-whitespace.png?width=64"
6
- label="GitLab User"
7
- sub-label="gitlab"
8
- title="Avatar labeled with tooltip"
9
- />
10
- </template>
@@ -1,36 +0,0 @@
1
- import AvatarLabeledExample from './avatar.labeled.example.vue';
2
- import AvatarLabeledBadgesExample from './avatar.labeled_badges.example.vue';
3
- import AvatarLabeledSlotsExample from './avatar.labeled_links.example.vue';
4
- import AvatarLabeledTooltipExample from './avatar.labeled_tooltip.example.vue';
5
-
6
- export default [
7
- {
8
- name: 'Basic',
9
- items: [
10
- {
11
- id: 'avatar-labeled',
12
- name: 'Avatar Labeled',
13
- description: 'Avatar with text labels',
14
- component: AvatarLabeledExample,
15
- },
16
- {
17
- id: 'avatar-labeled-tooltip',
18
- name: 'With tooltip',
19
- description: 'Avatar labeled with tooltip',
20
- component: AvatarLabeledTooltipExample,
21
- },
22
- {
23
- id: 'avatar-labeled-badges',
24
- name: 'With badges',
25
- description: 'Avatar labeled with badges',
26
- component: AvatarLabeledBadgesExample,
27
- },
28
- {
29
- id: 'avatar-labeled-links',
30
- name: 'With label links',
31
- description: 'Avatar labeled with links',
32
- component: AvatarLabeledSlotsExample,
33
- },
34
- ],
35
- },
36
- ];
@@ -1,18 +0,0 @@
1
- <script>
2
- export default {
3
- data() {
4
- return {
5
- avatars: [
6
- { src: 'https://picsum.photos/id/1005/24' },
7
- { src: 'https://picsum.photos/id/1006/24' },
8
- { src: 'https://picsum.photos/id/1009/24' },
9
- { src: 'https://picsum.photos/id/1011/24' },
10
- { src: 'https://picsum.photos/id/1012/24' },
11
- ],
12
- };
13
- },
14
- };
15
- </script>
16
- <template>
17
- <gl-avatars-inline :avatars="avatars" :collapsed="true" :avatar-size="24" :max-visible="2" />
18
- </template>
@@ -1,18 +0,0 @@
1
- <script>
2
- export default {
3
- data() {
4
- return {
5
- avatars: [
6
- { src: 'https://picsum.photos/id/1005/32' },
7
- { src: 'https://picsum.photos/id/1006/32' },
8
- { src: 'https://picsum.photos/id/1009/32' },
9
- { src: 'https://picsum.photos/id/1011/32' },
10
- { src: 'https://picsum.photos/id/1012/32' },
11
- ],
12
- };
13
- },
14
- };
15
- </script>
16
- <template>
17
- <gl-avatars-inline :avatars="avatars" :collapsed="true" :avatar-size="32" :max-visible="2" />
18
- </template>
@@ -1,24 +0,0 @@
1
- <script>
2
- export default {
3
- data() {
4
- return {
5
- avatars: [
6
- { src: 'https://picsum.photos/id/1005/32', tooltip: 'Avatar 1', href: '//gitlab.com' },
7
- { src: 'https://picsum.photos/id/1006/32', tooltip: 'Avatar 2', href: '//gitlab.com' },
8
- { src: 'https://picsum.photos/id/1009/32', tooltip: 'Avatar 3', href: '//gitlab.com' },
9
- { src: 'https://picsum.photos/id/1011/32', tooltip: 'Avatar 4', href: '//gitlab.com' },
10
- { src: 'https://picsum.photos/id/1012/32', tooltip: 'Avatar 5', href: '//gitlab.com' },
11
- ],
12
- };
13
- },
14
- };
15
- </script>
16
- <template>
17
- <gl-avatars-inline :avatars="avatars" :collapsed="true" :avatar-size="32" :max-visible="2">
18
- <template #avatar="{ avatar }">
19
- <gl-avatar-link v-gl-tooltip target="blank" :href="avatar.href" :title="avatar.tooltip">
20
- <gl-avatar :src="avatar.src" :size="32" />
21
- </gl-avatar-link>
22
- </template>
23
- </gl-avatars-inline>
24
- </template>
@@ -1,31 +0,0 @@
1
- <script>
2
- export default {
3
- data() {
4
- return {
5
- avatars: [
6
- { src: 'https://picsum.photos/id/1005/32', tooltip: 'Avatar 1', href: '//gitlab.com' },
7
- { src: 'https://picsum.photos/id/1006/32', tooltip: 'Avatar 2', href: '//gitlab.com' },
8
- { src: 'https://picsum.photos/id/1009/32', tooltip: 'Avatar 3', href: '//gitlab.com' },
9
- { src: 'https://picsum.photos/id/1011/32', tooltip: 'Avatar 4', href: '//gitlab.com' },
10
- { src: 'https://picsum.photos/id/1012/32', tooltip: 'Avatar 5', href: '//gitlab.com' },
11
- ],
12
- };
13
- },
14
- };
15
- </script>
16
- <template>
17
- <gl-avatars-inline
18
- :avatars="avatars"
19
- :collapsed="true"
20
- :avatar-size="32"
21
- :max-visible="2"
22
- badge-tooltip-prop="tooltip"
23
- :badge-tooltip-max-chars="20"
24
- >
25
- <template #avatar="{ avatar }">
26
- <gl-avatar-link v-gl-tooltip target="_blank" :href="avatar.href" :title="avatar.tooltip">
27
- <gl-avatar :src="avatar.src" :size="32" />
28
- </gl-avatar-link>
29
- </template>
30
- </gl-avatars-inline>
31
- </template>
@@ -1,36 +0,0 @@
1
- import AvatarsInlineExample from './avatars.inline.example.vue';
2
- import AvatarsInlineLargeExample from './avatars.inline_large.example.vue';
3
- import AvatarsInlineLinksAndTooltipsExample from './avatars.inline_links_and_tooltips.example.vue';
4
- import AvatarsInlineLinksAndTooltipsBadgeExample from './avatars.inline_links_and_tooltips_badge.example.vue';
5
-
6
- export default [
7
- {
8
- name: 'Basic',
9
- items: [
10
- {
11
- id: 'avatars-inline',
12
- name: 'Avatars Inline',
13
- description: 'Inline Avatars',
14
- component: AvatarsInlineExample,
15
- },
16
- {
17
- id: 'avatars-inline-large',
18
- name: 'Avatars Inline Large',
19
- description: 'Inline Avatars Large',
20
- component: AvatarsInlineLargeExample,
21
- },
22
- {
23
- id: 'avatars-inline-links-and-tooltips',
24
- name: 'Avatars inline with links and tooltips',
25
- description: 'Inline Avatars with Links and Tooltips',
26
- component: AvatarsInlineLinksAndTooltipsExample,
27
- },
28
- {
29
- id: 'avatars-inline-links-and-tooltips-badge',
30
- name: 'Avatars inline with tooltip on badge',
31
- description: 'Inline Avatars with Tooltip on Badge',
32
- component: AvatarsInlineLinksAndTooltipsBadgeExample,
33
- },
34
- ],
35
- },
36
- ];