diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-09-02 15:10:35 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-09-02 15:10:35 +0300 |
commit | 4fa04f789e6fed5f0dfeafe718eeb7f56a5086e9 (patch) | |
tree | 5ef2d1d8232d3bd359ec79bf95c9a35ce650ae0b /app/assets/javascripts/vue_shared/components/registry | |
parent | 4b9ace6c1fead1b44f173eaee0cfaa58f46a258a (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/vue_shared/components/registry')
-rw-r--r-- | app/assets/javascripts/vue_shared/components/registry/list_item.vue | 129 |
1 files changed, 129 insertions, 0 deletions
diff --git a/app/assets/javascripts/vue_shared/components/registry/list_item.vue b/app/assets/javascripts/vue_shared/components/registry/list_item.vue new file mode 100644 index 00000000000..f978de124d1 --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/registry/list_item.vue @@ -0,0 +1,129 @@ +<script> +import { GlButton } from '@gitlab/ui'; + +export default { + name: 'ListItem', + components: { GlButton }, + props: { + first: { + type: Boolean, + default: false, + required: false, + }, + disabled: { + type: Boolean, + default: false, + required: false, + }, + selected: { + type: Boolean, + default: false, + required: false, + }, + }, + data() { + return { + isDetailsShown: false, + detailsSlots: [], + }; + }, + computed: { + optionalClasses() { + return { + 'gl-border-t-transparent': !this.first && !this.selected, + 'gl-border-t-gray-100': this.first && !this.selected, + 'disabled-content': this.disabled, + 'gl-border-b-gray-100': !this.selected, + 'gl-bg-blue-50 gl-border-blue-200': this.selected, + }; + }, + }, + mounted() { + this.detailsSlots = Object.keys(this.$slots).filter(k => k.startsWith('details_')); + }, + methods: { + toggleDetails() { + this.isDetailsShown = !this.isDetailsShown; + }, + }, +}; +</script> + +<template> + <div + class="gl-display-flex gl-flex-direction-column gl-border-b-solid gl-border-t-solid gl-border-t-1 gl-border-b-1" + :class="optionalClasses" + > + <div class="gl-display-flex gl-align-items-center gl-py-5"> + <div + v-if="$slots['left-action']" + class="gl-w-7 gl-display-none gl-display-sm-flex gl-justify-content-start gl-pl-2" + > + <slot name="left-action"></slot> + </div> + <div + class="gl-display-flex gl-xs-flex-direction-column gl-justify-content-space-between gl-align-items-stretch gl-flex-fill-1" + > + <div + class="gl-display-flex gl-flex-direction-column gl-justify-content-space-between gl-xs-mb-3" + > + <div + v-if="$slots['left-primary']" + class="gl-display-flex gl-align-items-center gl-text-body gl-font-weight-bold gl-min-h-6" + > + <slot name="left-primary"></slot> + <gl-button + v-if="detailsSlots.length > 0" + :selected="isDetailsShown" + icon="ellipsis_h" + size="small" + class="gl-ml-2 gl-display-none gl-display-sm-block" + @click="toggleDetails" + /> + </div> + <div v-if="$slots['left-secondary']" class="gl-text-gray-500 gl-mt-1 gl-min-h-6"> + <slot name="left-secondary"></slot> + </div> + </div> + <div + class="gl-display-flex gl-flex-direction-column gl-sm-align-items-flex-end gl-justify-content-space-between gl-text-gray-500" + > + <div + v-if="$slots['right-primary']" + class="gl-sm-text-body gl-sm-font-weight-bold gl-min-h-6" + > + <slot name="right-primary"></slot> + </div> + <div v-if="$slots['right-secondary']" class="gl-mt-1 gl-min-h-6"> + <slot name="right-secondary"></slot> + </div> + </div> + </div> + <div + v-if="$slots['right-action']" + class="gl-w-9 gl-display-none gl-display-sm-flex gl-justify-content-end gl-pr-1" + > + <slot name="right-action"></slot> + </div> + </div> + <div class="gl-display-flex"> + <div class="gl-w-7"></div> + <div + v-if="isDetailsShown" + class="gl-display-flex gl-flex-direction-column gl-flex-fill-1 gl-bg-gray-10 gl-rounded-base gl-inset-border-1-gray-100 gl-mb-3" + > + <div + v-for="(row, detailIndex) in detailsSlots" + :key="detailIndex" + class="gl-px-5 gl-py-2" + :class="{ + 'gl-border-gray-100 gl-border-t-solid gl-border-t-1': detailIndex !== 0, + }" + > + <slot :name="row"></slot> + </div> + </div> + <div class="gl-w-9"></div> + </div> + </div> +</template> |