@gitlab/ui 32.18.0 → 32.20.1

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 (133) hide show
  1. package/CHANGELOG.md +28 -0
  2. package/dist/components/base/accordion/accordion.js +7 -0
  3. package/dist/components/base/accordion/accordion_item.js +11 -0
  4. package/dist/components/base/alert/alert.js +3 -3
  5. package/dist/components/base/button/button.documentation.js +17 -1
  6. package/dist/components/base/button/button.js +10 -10
  7. package/dist/components/base/card/card.documentation.js +2 -26
  8. package/dist/components/base/card/card.js +11 -0
  9. package/dist/components/base/daterange_picker/daterange_picker.js +43 -1
  10. package/dist/components/base/dropdown/dropdown.js +9 -9
  11. package/dist/components/base/form/form_checkbox/form_checkbox.documentation.js +2 -14
  12. package/dist/components/base/form/form_checkbox/form_checkbox.js +21 -1
  13. package/dist/components/base/form/form_checkbox/form_checkbox_group.js +2 -2
  14. package/dist/components/base/form/form_input_group/form_input_group.js +1 -1
  15. package/dist/components/base/form/form_input_group/form_input_group_mixin.js +2 -2
  16. package/dist/components/base/form/form_radio_group/form_radio_group.js +2 -2
  17. package/dist/components/base/tabs/tabs/examples/tabs.basic.example.js +1 -1
  18. package/dist/components/base/tabs/tabs/examples/tabs.counterbadges.example.js +1 -1
  19. package/dist/components/base/tabs/tabs/examples/tabs.custom_title.example.js +1 -1
  20. package/dist/components/base/tabs/tabs/examples/tabs.disabled.example.js +1 -1
  21. package/dist/components/base/tabs/tabs/examples/tabs.justified.example.js +1 -1
  22. package/dist/components/base/tabs/tabs/examples/tabs.scrollable.example.js +2 -2
  23. package/dist/components/base/tabs/tabs/examples/tabs.styles_only.example.js +1 -1
  24. package/dist/components/base/tabs/tabs/tabs.documentation.js +1 -1
  25. package/dist/components/charts/single_stat/single_stat.js +1 -1
  26. package/dist/components/mixins/button_mixin.js +4 -4
  27. package/dist/directives/safe_html/safe_html.js +1 -1
  28. package/dist/index.css +1 -1
  29. package/dist/index.css.map +1 -1
  30. package/dist/index.js +1 -1
  31. package/dist/utility_classes.css +1 -1
  32. package/dist/utility_classes.css.map +1 -1
  33. package/dist/utils/charts/mock_data.js +0 -2
  34. package/dist/utils/constants.js +8 -8
  35. package/dist/utils/use_fake_date.js +4 -4
  36. package/dist/utils/validation_utils.js +0 -2
  37. package/documentation/components_documentation.js +0 -3
  38. package/documentation/documented_stories.js +5 -0
  39. package/index.js +1 -1
  40. package/package.json +11 -11
  41. package/src/components/base/accordion/accordion.md +0 -4
  42. package/src/components/base/accordion/accordion.stories.js +58 -20
  43. package/src/components/base/accordion/accordion.vue +7 -0
  44. package/src/components/base/accordion/accordion_item.md +0 -4
  45. package/src/components/base/accordion/accordion_item.stories.js +56 -11
  46. package/src/components/base/accordion/accordion_item.vue +10 -0
  47. package/src/components/base/alert/alert.spec.js +3 -3
  48. package/src/components/base/alert/alert.vue +3 -3
  49. package/src/components/base/badge/badge.scss +1 -0
  50. package/src/components/base/button/button.documentation.js +18 -0
  51. package/src/components/base/button/button.stories.js +13 -13
  52. package/src/components/base/button/button.vue +15 -15
  53. package/src/components/base/card/card.documentation.js +0 -27
  54. package/src/components/base/card/card.md +0 -4
  55. package/src/components/base/card/card.stories.js +32 -18
  56. package/src/components/base/card/card.vue +12 -0
  57. package/src/components/base/datepicker/datepicker.stories.js +1 -1
  58. package/src/components/base/daterange_picker/daterange_picker.md +0 -4
  59. package/src/components/base/daterange_picker/daterange_picker.stories.js +151 -88
  60. package/src/components/base/daterange_picker/daterange_picker.vue +43 -4
  61. package/src/components/base/dropdown/dropdown.stories.js +5 -5
  62. package/src/components/base/dropdown/dropdown.vue +12 -12
  63. package/src/components/base/form/form_checkbox/form_checkbox.documentation.js +0 -15
  64. package/src/components/base/form/form_checkbox/form_checkbox.md +2 -4
  65. package/src/components/base/form/form_checkbox/form_checkbox.stories.js +31 -39
  66. package/src/components/base/form/form_checkbox/form_checkbox.vue +21 -6
  67. package/src/components/base/form/form_checkbox/form_checkbox_group.vue +1 -1
  68. package/src/components/base/form/form_input_group/form_input_group.vue +1 -1
  69. package/src/components/base/form/form_input_group/form_input_group_mixin.js +1 -1
  70. package/src/components/base/form/form_radio_group/form_radio_group.vue +1 -1
  71. package/src/components/base/tabs/tabs/examples/tabs.basic.example.vue +2 -2
  72. package/src/components/base/tabs/tabs/examples/tabs.counterbadges.example.vue +9 -6
  73. package/src/components/base/tabs/tabs/examples/tabs.custom_title.example.vue +3 -3
  74. package/src/components/base/tabs/tabs/examples/tabs.disabled.example.vue +3 -3
  75. package/src/components/base/tabs/tabs/examples/tabs.justified.example.vue +2 -2
  76. package/src/components/base/tabs/tabs/examples/tabs.scrollable.example.vue +2 -2
  77. package/src/components/base/tabs/tabs/examples/tabs.styles_only.example.vue +4 -4
  78. package/src/components/base/tabs/tabs/tabs.md +8 -8
  79. package/src/components/base/tabs/tabs/tabs.stories.js +42 -40
  80. package/src/components/charts/single_stat/single_stat.vue +5 -1
  81. package/src/components/mixins/button_mixin.js +3 -3
  82. package/src/directives/safe_html/safe_html.js +1 -3
  83. package/src/directives/safe_html/safe_html.spec.js +1 -1
  84. package/src/scss/utilities.scss +8 -0
  85. package/src/scss/utility-mixins/sizing.scss +4 -0
  86. package/src/utils/charts/mock_data.js +0 -2
  87. package/src/utils/constants.js +7 -7
  88. package/src/utils/use_fake_date.js +2 -2
  89. package/src/utils/validation_utils.js +0 -2
  90. package/dist/components/base/accordion/accordion.documentation.js +0 -20
  91. package/dist/components/base/accordion/accordion_item.documentation.js +0 -22
  92. package/dist/components/base/accordion/examples/accordion.auto_collapse.example.js +0 -38
  93. package/dist/components/base/accordion/examples/accordion.basic.example.js +0 -38
  94. package/dist/components/base/accordion/examples/accordion.initial_visible.example.js +0 -38
  95. package/dist/components/base/accordion/examples/index.js +0 -25
  96. package/dist/components/base/card/examples/card.basic.example.js +0 -38
  97. package/dist/components/base/card/examples/card.headerfooter.example.js +0 -38
  98. package/dist/components/base/card/examples/index.js +0 -19
  99. package/dist/components/base/daterange_picker/daterange_picker.documentation.js +0 -29
  100. package/dist/components/base/daterange_picker/examples/daterange_picker.basic.example.js +0 -49
  101. package/dist/components/base/daterange_picker/examples/index.js +0 -12
  102. package/dist/components/base/form/form_checkbox/examples/form_checkbox.checked.example.js +0 -48
  103. package/dist/components/base/form/form_checkbox/examples/form_checkbox.checked_disabled.example.js +0 -48
  104. package/dist/components/base/form/form_checkbox/examples/form_checkbox.disabled.example.js +0 -38
  105. package/dist/components/base/form/form_checkbox/examples/form_checkbox.help.example.js +0 -38
  106. package/dist/components/base/form/form_checkbox/examples/form_checkbox.indeterminant.example.js +0 -38
  107. package/dist/components/base/form/form_checkbox/examples/form_checkbox.unchecked.example.js +0 -38
  108. package/dist/components/base/form/form_checkbox/examples/form_checkbox.values.example.js +0 -48
  109. package/dist/components/base/form/form_checkbox/examples/form_checkbox_group.options_array.example.js +0 -58
  110. package/dist/components/base/form/form_checkbox/examples/form_checkbox_group.slots.example.js +0 -38
  111. package/dist/components/base/form/form_checkbox/examples/index.js +0 -55
  112. package/src/components/base/accordion/accordion.documentation.js +0 -19
  113. package/src/components/base/accordion/accordion_item.documentation.js +0 -20
  114. package/src/components/base/accordion/examples/accordion.auto_collapse.example.vue +0 -16
  115. package/src/components/base/accordion/examples/accordion.basic.example.vue +0 -17
  116. package/src/components/base/accordion/examples/accordion.initial_visible.example.vue +0 -16
  117. package/src/components/base/accordion/examples/index.js +0 -29
  118. package/src/components/base/card/examples/card.basic.example.vue +0 -3
  119. package/src/components/base/card/examples/card.headerfooter.example.vue +0 -11
  120. package/src/components/base/card/examples/index.js +0 -22
  121. package/src/components/base/daterange_picker/daterange_picker.documentation.js +0 -34
  122. package/src/components/base/daterange_picker/examples/daterange_picker.basic.example.vue +0 -13
  123. package/src/components/base/daterange_picker/examples/index.js +0 -14
  124. package/src/components/base/form/form_checkbox/examples/form_checkbox.checked.example.vue +0 -13
  125. package/src/components/base/form/form_checkbox/examples/form_checkbox.checked_disabled.example.vue +0 -13
  126. package/src/components/base/form/form_checkbox/examples/form_checkbox.disabled.example.vue +0 -3
  127. package/src/components/base/form/form_checkbox/examples/form_checkbox.help.example.vue +0 -6
  128. package/src/components/base/form/form_checkbox/examples/form_checkbox.indeterminant.example.vue +0 -3
  129. package/src/components/base/form/form_checkbox/examples/form_checkbox.unchecked.example.vue +0 -3
  130. package/src/components/base/form/form_checkbox/examples/form_checkbox.values.example.vue +0 -15
  131. package/src/components/base/form/form_checkbox/examples/form_checkbox_group.options_array.example.vue +0 -27
  132. package/src/components/base/form/form_checkbox/examples/form_checkbox_group.slots.example.vue +0 -11
  133. package/src/components/base/form/form_checkbox/examples/index.js +0 -67
@@ -1,58 +0,0 @@
1
- import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
2
-
3
- var script = {
4
- data() {
5
- return {
6
- selected: [],
7
- options: ['String option', {
8
- text: 'Object option',
9
- value: 'object'
10
- }, {
11
- html: '<i>HTML</i> option',
12
- value: 'html'
13
- }, {
14
- text: 'Disabled option',
15
- disabled: true
16
- }]
17
- };
18
- }
19
-
20
- };
21
-
22
- /* script */
23
- const __vue_script__ = script;
24
-
25
- /* template */
26
- var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-form-checkbox-group',{attrs:{"options":_vm.options},model:{value:(_vm.selected),callback:function ($$v) {_vm.selected=$$v;},expression:"selected"}})};
27
- var __vue_staticRenderFns__ = [];
28
-
29
- /* style */
30
- const __vue_inject_styles__ = undefined;
31
- /* scoped */
32
- const __vue_scope_id__ = undefined;
33
- /* module identifier */
34
- const __vue_module_identifier__ = undefined;
35
- /* functional template */
36
- const __vue_is_functional_template__ = false;
37
- /* style inject */
38
-
39
- /* style inject SSR */
40
-
41
- /* style inject shadow dom */
42
-
43
-
44
-
45
- const __vue_component__ = __vue_normalize__(
46
- { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
47
- __vue_inject_styles__,
48
- __vue_script__,
49
- __vue_scope_id__,
50
- __vue_is_functional_template__,
51
- __vue_module_identifier__,
52
- false,
53
- undefined,
54
- undefined,
55
- undefined
56
- );
57
-
58
- 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-form-checkbox-group',[_c('gl-form-checkbox',[_vm._v("One")]),_vm._v(" "),_c('gl-form-checkbox',{scopedSlots:_vm._u([{key:"help",fn:function(){return [_vm._v("Help text")]},proxy:true}])},[_vm._v("\n Two\n ")]),_vm._v(" "),_c('gl-form-checkbox',[_vm._v("Three")]),_vm._v(" "),_c('gl-form-checkbox',{attrs:{"disabled":""}},[_vm._v("Disabled option")])],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,55 +0,0 @@
1
- import FormCheckboxChecked from './form_checkbox.checked.example';
2
- import FormCheckboxCheckedDisabled from './form_checkbox.checked_disabled.example';
3
- import FormCheckboxDisabled from './form_checkbox.disabled.example';
4
- import FormCheckboxHelp from './form_checkbox.help.example';
5
- import FormCheckboxIndeterminate from './form_checkbox.indeterminant.example';
6
- import FormCheckboxUnchecked from './form_checkbox.unchecked.example';
7
- import FormCheckboxValues from './form_checkbox.values.example';
8
- import FormCheckboxGroupOptionsArray from './form_checkbox_group.options_array.example';
9
- import FormCheckboxGroupSlots from './form_checkbox_group.slots.example';
10
-
11
- var index = [{
12
- name: 'Checkbox',
13
- items: [{
14
- id: 'form-checkbox-checked',
15
- name: 'Checked Form Checkbox',
16
- component: FormCheckboxChecked
17
- }, {
18
- id: 'form-checkbox-unchecked',
19
- name: 'Unchecked Form Checkbox',
20
- component: FormCheckboxUnchecked
21
- }, {
22
- id: 'form-checkbox-disabled',
23
- name: 'Disabled Form Checkbox',
24
- component: FormCheckboxDisabled
25
- }, {
26
- id: 'form-checkbox-model',
27
- name: 'Checked and Disabled Form Checkbox',
28
- component: FormCheckboxCheckedDisabled
29
- }, {
30
- id: 'form-checkbox-values',
31
- name: 'Custom Values for Form Checkbox',
32
- component: FormCheckboxValues
33
- }, {
34
- id: 'form-checkbox-indeterminate',
35
- name: 'Indeterminate State of Form Checkbox',
36
- component: FormCheckboxIndeterminate
37
- }, {
38
- id: 'form-checkbox-help',
39
- name: 'Form Checkbox with Help Text',
40
- component: FormCheckboxHelp
41
- }]
42
- }, {
43
- name: 'Checkbox Group',
44
- items: [{
45
- id: 'form-checkbox-group-slots',
46
- name: 'Form Checkbox Group using Slots',
47
- component: FormCheckboxGroupSlots
48
- }, {
49
- id: 'form-checkbox-group-options-array',
50
- name: 'Form Checkbox Group using Options Array',
51
- component: FormCheckboxGroupOptionsArray
52
- }]
53
- }];
54
-
55
- export default index;
@@ -1,19 +0,0 @@
1
- import description from './accordion.md';
2
- import examples from './examples';
3
-
4
- export default {
5
- followsDesignSystem: true,
6
- description,
7
- examples,
8
- bootstrapComponent: 'b-collapse',
9
- propsInfo: {
10
- autoCollapse: {
11
- additionalInfo:
12
- 'When true, will have the effect of closing other accordion items when one accordion item is visible.',
13
- },
14
- headerLevel: {
15
- additionalInfo:
16
- 'The header tag used in the accordion (h1/h2/h3/h4/h5/h6). This overrides the value provided by GlAccordion. For accessibility this should be set to an appropriate value in the context where the accordion is used.',
17
- },
18
- },
19
- };
@@ -1,20 +0,0 @@
1
- import description from './accordion_item.md';
2
- import examples from './examples';
3
-
4
- export default {
5
- description,
6
- examples,
7
- bootstrapComponent: 'b-collapse',
8
- propsInfo: {
9
- title: {
10
- additionalInfo: 'Used to set the title of accordion link.',
11
- },
12
- visible: {
13
- additionalInfo: 'When set, it will ensure the accordion item is initially visible.',
14
- },
15
- headerLevel: {
16
- additionalInfo:
17
- 'The header tag used in the accordion (h1/h2/h3/h4/h5/h6). This overrides the value provided by GlAccordion. For accessibility this should be set to an appropriate value in the context where the accordion is used.',
18
- },
19
- },
20
- };
@@ -1,16 +0,0 @@
1
- <template>
2
- <gl-accordion :header-level="3" :auto-collapse="true">
3
- <gl-accordion-item title="Item 1">
4
- Only one collapse in an accordion group can be open at a time by providing an accordion group
5
- identifier.
6
- </gl-accordion-item>
7
- <gl-accordion-item title="Item 2">
8
- Only one collapse in an accordion group can be open at a time by providing an accordion group
9
- identifier.
10
- </gl-accordion-item>
11
- <gl-accordion-item title="Item 3">
12
- Only one collapse in an accordion group can be open at a time by providing an accordion group
13
- identifier.
14
- </gl-accordion-item>
15
- </gl-accordion>
16
- </template>
@@ -1,17 +0,0 @@
1
- <template>
2
- <gl-accordion :header-level="3">
3
- <gl-accordion-item title="Item 1">
4
- Each accordion can be expanded or collapsed independently of others.
5
- </gl-accordion-item>
6
-
7
- <gl-accordion-item title="Item 2">
8
- If you want the other accordion items to collapse when one is open, please see
9
- <code>Collapse Other</code> example.
10
- </gl-accordion-item>
11
-
12
- <gl-accordion-item title="Item 3">
13
- If you want to have an accordion item to be initially visible, please see
14
- <code>Initial Visible</code> example.
15
- </gl-accordion-item>
16
- </gl-accordion>
17
- </template>
@@ -1,16 +0,0 @@
1
- <template>
2
- <gl-accordion :header-level="4">
3
- <gl-accordion-item title="Item 1">
4
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam, a!
5
- </gl-accordion-item>
6
-
7
- <gl-accordion-item title="Item 2">
8
- Lorem ipsum dolor, sit amet consectetur adipisicing elit. Debitis tenetur ipsa quos ullam
9
- quibusdam blanditiis libero voluptas delectus corporis vitae.
10
- </gl-accordion-item>
11
-
12
- <gl-accordion-item title="Initially Visible" visible>
13
- I am visible initially and expanded on start.
14
- </gl-accordion-item>
15
- </gl-accordion>
16
- </template>
@@ -1,29 +0,0 @@
1
- import AccordionAutoCollapseExample from './accordion.auto_collapse.example.vue';
2
- import AccordionBasicExample from './accordion.basic.example.vue';
3
- import AccordionInitialVisibleExample from './accordion.initial_visible.example.vue';
4
-
5
- export default [
6
- {
7
- name: 'Basic',
8
- items: [
9
- {
10
- id: 'accordion-basic',
11
- name: 'Basic',
12
- description: 'Basic Accordion',
13
- component: AccordionBasicExample,
14
- },
15
- {
16
- id: 'accordion-initial-visible',
17
- name: 'Initial Visible',
18
- description: 'Initial visibility (start expanded)',
19
- component: AccordionInitialVisibleExample,
20
- },
21
- {
22
- id: 'accordion-auto-collapse',
23
- name: 'Auto Collapse',
24
- description: 'Auto collapse in an accordion group',
25
- component: AccordionAutoCollapseExample,
26
- },
27
- ],
28
- },
29
- ];
@@ -1,3 +0,0 @@
1
- <template>
2
- <gl-card title="Basic Card">Hello World</gl-card>
3
- </template>
@@ -1,11 +0,0 @@
1
- <template>
2
- <gl-card>
3
- <template #header>
4
- <h3 class="gl-my-0 gl-font-weight-bold">This is a custom header</h3>
5
- </template>
6
- Hello World
7
- <template #footer>
8
- <span>This is a custom footer</span>
9
- </template>
10
- </gl-card>
11
- </template>
@@ -1,22 +0,0 @@
1
- import CardBasicExample from './card.basic.example.vue';
2
- import CardHeaderFooter from './card.headerfooter.example.vue';
3
-
4
- export default [
5
- {
6
- name: 'Basic',
7
- items: [
8
- {
9
- id: 'card-basic',
10
- name: 'Basic',
11
- description: 'Basic Card',
12
- component: CardBasicExample,
13
- },
14
- {
15
- id: 'card-with-header-footer',
16
- name: 'Card with Header and Footer',
17
- description: 'Card with Header and Footer',
18
- component: CardHeaderFooter,
19
- },
20
- ],
21
- },
22
- ];
@@ -1,34 +0,0 @@
1
- import description from './daterange_picker.md';
2
- import examples from './examples';
3
-
4
- export default {
5
- followsDesignSystem: true,
6
- description,
7
- examples,
8
- events: [
9
- {
10
- event: 'start-picker-open',
11
- description: 'Emitted when the start date datepicker becomes visible.',
12
- },
13
- {
14
- event: 'start-picker-close',
15
- description: 'Emitted when the start date datepicker is hidden.',
16
- },
17
- {
18
- event: 'end-picker-open',
19
- description: 'Emitted when the end date datepicker becomes visible.',
20
- },
21
- {
22
- event: 'end-picker-close',
23
- description: 'Emitted when the end date datepicker is hidden.',
24
- },
25
- ],
26
- slots: [
27
- {
28
- name: 'default',
29
- description:
30
- 'Content to display for days selected. The value is -1 when no date range is selected.',
31
- scopedProps: 'daysSelected (Number)',
32
- },
33
- ],
34
- };
@@ -1,13 +0,0 @@
1
- <script>
2
- export default {
3
- data() {
4
- return {
5
- defaultStartDate: null,
6
- defaultEndDate: null,
7
- };
8
- },
9
- };
10
- </script>
11
- <template>
12
- <gl-daterange-picker class="d-flex" />
13
- </template>
@@ -1,14 +0,0 @@
1
- import DaterangePickerBasicExample from './daterange_picker.basic.example.vue';
2
-
3
- export default [
4
- {
5
- name: 'Daterange Picker',
6
- items: [
7
- {
8
- id: 'basic-daterange-picker',
9
- name: 'Basic daterange picker',
10
- component: DaterangePickerBasicExample,
11
- },
12
- ],
13
- },
14
- ];
@@ -1,13 +0,0 @@
1
- <script>
2
- export default {
3
- data() {
4
- return {
5
- checked: true,
6
- };
7
- },
8
- };
9
- </script>
10
-
11
- <template>
12
- <gl-form-checkbox v-model="checked">Checked Form Checkbox</gl-form-checkbox>
13
- </template>
@@ -1,13 +0,0 @@
1
- <script>
2
- export default {
3
- data() {
4
- return {
5
- checked: true,
6
- };
7
- },
8
- };
9
- </script>
10
-
11
- <template>
12
- <gl-form-checkbox v-model="checked" disabled>Disabled and Checked Form Checkbox</gl-form-checkbox>
13
- </template>
@@ -1,3 +0,0 @@
1
- <template>
2
- <gl-form-checkbox disabled>Disabled Form Checkbox</gl-form-checkbox>
3
- </template>
@@ -1,6 +0,0 @@
1
- <template>
2
- <gl-form-checkbox>
3
- Checkbox with help text
4
- <template #help>Help text</template>
5
- </gl-form-checkbox>
6
- </template>
@@ -1,3 +0,0 @@
1
- <template>
2
- <gl-form-checkbox :indeterminate="true">Indeterminate status</gl-form-checkbox>
3
- </template>
@@ -1,3 +0,0 @@
1
- <template>
2
- <gl-form-checkbox>Unchecked Form Checkbox</gl-form-checkbox>
3
- </template>
@@ -1,15 +0,0 @@
1
- <script>
2
- export default {
3
- data() {
4
- return {
5
- status: 'not-accepted',
6
- };
7
- },
8
- };
9
- </script>
10
-
11
- <template>
12
- <gl-form-checkbox v-model="status" value="accepted" unchecked-value="not-accepted">
13
- Accepted or Not Accepted
14
- </gl-form-checkbox>
15
- </template>
@@ -1,27 +0,0 @@
1
- <script>
2
- export default {
3
- data() {
4
- return {
5
- selected: [],
6
- options: [
7
- 'String option',
8
- { text: 'Object option', value: 'object' },
9
- { html: '<i>HTML</i> option', value: 'html' },
10
- { text: 'Disabled option', disabled: true },
11
- ],
12
- };
13
- },
14
- };
15
- </script>
16
-
17
- <template>
18
- <!--
19
- options: [
20
- 'String option',
21
- { text: 'Object option', value: 'object' },
22
- { html: '<i>HTML</i> option', value: 'html' },
23
- { text: 'Disabled option', disabled: true },
24
- ],
25
- -->
26
- <gl-form-checkbox-group v-model="selected" :options="options" />
27
- </template>
@@ -1,11 +0,0 @@
1
- <template>
2
- <gl-form-checkbox-group>
3
- <gl-form-checkbox>One</gl-form-checkbox>
4
- <gl-form-checkbox>
5
- Two
6
- <template #help>Help text</template>
7
- </gl-form-checkbox>
8
- <gl-form-checkbox>Three</gl-form-checkbox>
9
- <gl-form-checkbox disabled>Disabled option</gl-form-checkbox>
10
- </gl-form-checkbox-group>
11
- </template>
@@ -1,67 +0,0 @@
1
- import FormCheckboxChecked from './form_checkbox.checked.example.vue';
2
- import FormCheckboxCheckedDisabled from './form_checkbox.checked_disabled.example.vue';
3
- import FormCheckboxDisabled from './form_checkbox.disabled.example.vue';
4
- import FormCheckboxHelp from './form_checkbox.help.example.vue';
5
- import FormCheckboxIndeterminate from './form_checkbox.indeterminant.example.vue';
6
- import FormCheckboxUnchecked from './form_checkbox.unchecked.example.vue';
7
- import FormCheckboxValues from './form_checkbox.values.example.vue';
8
- import FormCheckboxGroupOptionsArray from './form_checkbox_group.options_array.example.vue';
9
- import FormCheckboxGroupSlots from './form_checkbox_group.slots.example.vue';
10
-
11
- export default [
12
- {
13
- name: 'Checkbox',
14
- items: [
15
- {
16
- id: 'form-checkbox-checked',
17
- name: 'Checked Form Checkbox',
18
- component: FormCheckboxChecked,
19
- },
20
- {
21
- id: 'form-checkbox-unchecked',
22
- name: 'Unchecked Form Checkbox',
23
- component: FormCheckboxUnchecked,
24
- },
25
- {
26
- id: 'form-checkbox-disabled',
27
- name: 'Disabled Form Checkbox',
28
- component: FormCheckboxDisabled,
29
- },
30
- {
31
- id: 'form-checkbox-model',
32
- name: 'Checked and Disabled Form Checkbox',
33
- component: FormCheckboxCheckedDisabled,
34
- },
35
- {
36
- id: 'form-checkbox-values',
37
- name: 'Custom Values for Form Checkbox',
38
- component: FormCheckboxValues,
39
- },
40
- {
41
- id: 'form-checkbox-indeterminate',
42
- name: 'Indeterminate State of Form Checkbox',
43
- component: FormCheckboxIndeterminate,
44
- },
45
- {
46
- id: 'form-checkbox-help',
47
- name: 'Form Checkbox with Help Text',
48
- component: FormCheckboxHelp,
49
- },
50
- ],
51
- },
52
- {
53
- name: 'Checkbox Group',
54
- items: [
55
- {
56
- id: 'form-checkbox-group-slots',
57
- name: 'Form Checkbox Group using Slots',
58
- component: FormCheckboxGroupSlots,
59
- },
60
- {
61
- id: 'form-checkbox-group-options-array',
62
- name: 'Form Checkbox Group using Options Array',
63
- component: FormCheckboxGroupOptionsArray,
64
- },
65
- ],
66
- },
67
- ];