@gitlab/ui 75.0.0 → 75.1.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.
- package/CHANGELOG.md +7 -0
- package/dist/components/base/drawer/drawer.js +8 -1
- package/dist/components/experimental/duo/chat/components/duo_chat_message/duo_chat_message.js +1 -1
- package/dist/tokens/css/tokens.css +1 -1
- package/dist/tokens/css/tokens.dark.css +1 -1
- package/dist/tokens/js/tokens.dark.js +1 -1
- package/dist/tokens/js/tokens.js +1 -1
- package/dist/tokens/scss/_tokens.dark.scss +1 -1
- package/dist/tokens/scss/_tokens.scss +1 -1
- package/package.json +1 -1
- package/src/components/base/drawer/drawer.md +2 -1
- package/src/components/base/drawer/drawer.stories.js +16 -1
- package/src/components/base/drawer/drawer.vue +8 -1
- package/src/components/experimental/duo/chat/components/duo_chat_message/duo_chat_message.vue +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,10 @@
|
|
|
1
|
+
# [75.1.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v75.0.0...v75.1.0) (2024-02-22)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Features
|
|
5
|
+
|
|
6
|
+
* **GlDrawer:** Emit "opened" event in transition after-enter hook ([f752b36](https://gitlab.com/gitlab-org/gitlab-ui/commit/f752b3675cf15597412fa28f89df699edcf56f57))
|
|
7
|
+
|
|
1
8
|
# [75.0.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v74.9.3...v75.0.0) (2024-02-21)
|
|
2
9
|
|
|
3
10
|
|
|
@@ -79,6 +79,13 @@ var script = {
|
|
|
79
79
|
document.removeEventListener('keydown', this.handleEscape);
|
|
80
80
|
},
|
|
81
81
|
methods: {
|
|
82
|
+
emitOpened() {
|
|
83
|
+
/**
|
|
84
|
+
* Emits when the opening animation has finished.
|
|
85
|
+
* @event opened
|
|
86
|
+
*/
|
|
87
|
+
this.$emit('opened');
|
|
88
|
+
},
|
|
82
89
|
handleEscape(e) {
|
|
83
90
|
const ESC = 27;
|
|
84
91
|
if (this.open && e.keyCode === ESC) {
|
|
@@ -92,7 +99,7 @@ var script = {
|
|
|
92
99
|
const __vue_script__ = script;
|
|
93
100
|
|
|
94
101
|
/* template */
|
|
95
|
-
var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('transition',{attrs:{"name":"gl-drawer"}},[(_vm.open)?_c('aside',{staticClass:"gl-drawer",class:_vm.variantClass,style:(_vm.drawerStyles)},[_c('div',{staticClass:"gl-drawer-header",class:{ 'gl-drawer-header-sticky': _vm.headerSticky },style:(_vm.drawerHeaderStyles)},[_c('div',{staticClass:"gl-drawer-title"},[_vm._t("title"),_vm._v(" "),_c('gl-button',{staticClass:"gl-drawer-close-button",attrs:{"category":"tertiary","size":"small","icon":"close","aria-label":"Close drawer"},on:{"click":function($event){return _vm.$emit('close')}}})],2),_vm._v(" "),_vm._t("header")],2),_vm._v(" "),_c('div',{staticClass:"gl-drawer-body",class:{ 'gl-drawer-body-scrim': !_vm.shouldRenderFooter }},[_vm._t("default")],2),_vm._v(" "),(_vm.shouldRenderFooter)?_c('div',{staticClass:"gl-drawer-footer gl-drawer-footer-sticky",class:{ 'gl-drawer-body-scrim-on-footer': _vm.shouldRenderFooter },style:({ zIndex: _vm.zIndex })},[_vm._t("footer")],2):_vm._e()]):_vm._e()])};
|
|
102
|
+
var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('transition',{attrs:{"name":"gl-drawer"},on:{"after-enter":_vm.emitOpened}},[(_vm.open)?_c('aside',{staticClass:"gl-drawer",class:_vm.variantClass,style:(_vm.drawerStyles)},[_c('div',{staticClass:"gl-drawer-header",class:{ 'gl-drawer-header-sticky': _vm.headerSticky },style:(_vm.drawerHeaderStyles)},[_c('div',{staticClass:"gl-drawer-title"},[_vm._t("title"),_vm._v(" "),_c('gl-button',{staticClass:"gl-drawer-close-button",attrs:{"category":"tertiary","size":"small","icon":"close","aria-label":"Close drawer"},on:{"click":function($event){return _vm.$emit('close')}}})],2),_vm._v(" "),_vm._t("header")],2),_vm._v(" "),_c('div',{staticClass:"gl-drawer-body",class:{ 'gl-drawer-body-scrim': !_vm.shouldRenderFooter }},[_vm._t("default")],2),_vm._v(" "),(_vm.shouldRenderFooter)?_c('div',{staticClass:"gl-drawer-footer gl-drawer-footer-sticky",class:{ 'gl-drawer-body-scrim-on-footer': _vm.shouldRenderFooter },style:({ zIndex: _vm.zIndex })},[_vm._t("footer")],2):_vm._e()]):_vm._e()])};
|
|
96
103
|
var __vue_staticRenderFns__ = [];
|
|
97
104
|
|
|
98
105
|
/* style */
|
package/dist/components/experimental/duo/chat/components/duo_chat_message/duo_chat_message.js
CHANGED
|
@@ -96,7 +96,7 @@ var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=
|
|
|
96
96
|
'gl-ml-auto gl-bg-blue-100 gl-text-blue-900 gl-rounded-bottom-right-none': _vm.isUserMessage,
|
|
97
97
|
'gl-rounded-bottom-left-none gl-text-gray-900 gl-bg-white gl-border-1 gl-border-solid gl-border-gray-50':
|
|
98
98
|
_vm.isAssistantMessage,
|
|
99
|
-
}},[_c('div',{directives:[{name:"safe-html",rawName:"v-safe-html:[$options.safeHtmlConfigExtension]",value:(_vm.messageContent),expression:"messageContent",arg:_vm.$options.safeHtmlConfigExtension}],ref:"content"}),_vm._v(" "),(_vm.isAssistantMessage)?[(_vm.sources)?_c('documentation-sources',{attrs:{"sources":_vm.sources}}):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-display-flex gl-align-items-flex-end gl-mt-4"},[_c('gl-duo-user-feedback',{on:{"feedback":function($event){return _vm.$emit('track-feedback', $event)}}})],1)]:_vm._e()],2)};
|
|
99
|
+
}},[_c('div',{directives:[{name:"safe-html",rawName:"v-safe-html:[$options.safeHtmlConfigExtension]",value:(_vm.messageContent),expression:"messageContent",arg:_vm.$options.safeHtmlConfigExtension}],ref:"content"}),_vm._v(" "),(_vm.isAssistantMessage)?[(_vm.sources)?_c('documentation-sources',{attrs:{"sources":_vm.sources}}):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-display-flex gl-align-items-flex-end gl-mt-4 duo-chat-message-feedback"},[_c('gl-duo-user-feedback',{on:{"feedback":function($event){return _vm.$emit('track-feedback', $event)}}})],1)]:_vm._e()],2)};
|
|
100
100
|
var __vue_staticRenderFns__ = [];
|
|
101
101
|
|
|
102
102
|
/* style */
|
package/dist/tokens/js/tokens.js
CHANGED
package/package.json
CHANGED
|
@@ -4,7 +4,7 @@ handle actions on the information.
|
|
|
4
4
|
### By default
|
|
5
5
|
|
|
6
6
|
```html
|
|
7
|
-
<gl-drawer :open="open" @close="close">
|
|
7
|
+
<gl-drawer :open="open" @close="close" @opened="opened">
|
|
8
8
|
<template #header>Your Title</template>
|
|
9
9
|
<template>
|
|
10
10
|
...children
|
|
@@ -14,3 +14,4 @@ handle actions on the information.
|
|
|
14
14
|
|
|
15
15
|
- `v-bind:open` will be a boolean you will pass to `gl-drawer` and `@close` is a listener that will
|
|
16
16
|
be a function that will toggle open to `false`.
|
|
17
|
+
- The component emits an `opened` event after the opening animation has finished.
|
|
@@ -69,6 +69,7 @@ const createSidebarTemplate = (content) => `
|
|
|
69
69
|
:header-sticky="headerSticky"
|
|
70
70
|
:z-index="zIndex"
|
|
71
71
|
:variant="variant"
|
|
72
|
+
@opened="opened"
|
|
72
73
|
@close="close">${content}</gl-drawer>
|
|
73
74
|
`;
|
|
74
75
|
|
|
@@ -105,9 +106,23 @@ const storyOptions = (viewMode) => ({
|
|
|
105
106
|
});
|
|
106
107
|
|
|
107
108
|
export const Default = (_args, { viewMode }) => ({
|
|
109
|
+
mixins: [
|
|
110
|
+
{
|
|
111
|
+
data() {
|
|
112
|
+
return {
|
|
113
|
+
timesOpened: 0,
|
|
114
|
+
};
|
|
115
|
+
},
|
|
116
|
+
methods: {
|
|
117
|
+
opened() {
|
|
118
|
+
this.timesOpened += 1;
|
|
119
|
+
},
|
|
120
|
+
},
|
|
121
|
+
},
|
|
122
|
+
],
|
|
108
123
|
...storyOptions(viewMode),
|
|
109
124
|
template: `
|
|
110
|
-
<div>
|
|
125
|
+
<div :data-opened-count="timesOpened">
|
|
111
126
|
<gl-button @click="toggle">Toggle Drawer</gl-button>
|
|
112
127
|
${createSidebarTemplate(`
|
|
113
128
|
<template #title>List Settings</template>
|
|
@@ -81,6 +81,13 @@ export default {
|
|
|
81
81
|
document.removeEventListener('keydown', this.handleEscape);
|
|
82
82
|
},
|
|
83
83
|
methods: {
|
|
84
|
+
emitOpened() {
|
|
85
|
+
/**
|
|
86
|
+
* Emits when the opening animation has finished.
|
|
87
|
+
* @event opened
|
|
88
|
+
*/
|
|
89
|
+
this.$emit('opened');
|
|
90
|
+
},
|
|
84
91
|
handleEscape(e) {
|
|
85
92
|
const ESC = 27;
|
|
86
93
|
|
|
@@ -92,7 +99,7 @@ export default {
|
|
|
92
99
|
};
|
|
93
100
|
</script>
|
|
94
101
|
<template>
|
|
95
|
-
<transition name="gl-drawer">
|
|
102
|
+
<transition name="gl-drawer" @after-enter="emitOpened">
|
|
96
103
|
<aside v-if="open" :style="drawerStyles" class="gl-drawer" :class="variantClass">
|
|
97
104
|
<div
|
|
98
105
|
class="gl-drawer-header"
|
package/src/components/experimental/duo/chat/components/duo_chat_message/duo_chat_message.vue
CHANGED
|
@@ -109,7 +109,7 @@ export default {
|
|
|
109
109
|
<template v-if="isAssistantMessage">
|
|
110
110
|
<documentation-sources v-if="sources" :sources="sources" />
|
|
111
111
|
|
|
112
|
-
<div class="gl-display-flex gl-align-items-flex-end gl-mt-4">
|
|
112
|
+
<div class="gl-display-flex gl-align-items-flex-end gl-mt-4 duo-chat-message-feedback">
|
|
113
113
|
<gl-duo-user-feedback @feedback="$emit('track-feedback', $event)" />
|
|
114
114
|
</div>
|
|
115
115
|
</template>
|