@webitel/ui-sdk 3.1.7 → 3.1.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "3.1.7",
+  "version": "3.1.8",
   "private": false,
   "scripts": {
     "serve-lib": "vue-cli-service serve",

package/src/components/index.js

@@ -53,6 +53,7 @@ import WtTable from './organisms/wt-table/wt-table.vue';
 import WtTableActions from './organisms/wt-table-actions/wt-table-actions.vue';
 import WtTableColumnSelect from './organisms/wt-table-column-select/wt-table-column-select.vue';
 import WtIconAction from './organisms/wt-icon-action/wt-icon-action.vue';
+import WtPageHeader from './organisms/wt-page-header/wt-page-header.vue';
 
 const Components = {
   WtAvatar,
@@ -107,6 +108,7 @@ const Components = {
   WtCopyAction,
   WtLoadBar,
   WtIconAction,
+  WtPageHeader,
 };
 
 export default Components;

package/src/components/organisms/wt-page-header/__tests__/wt-page-header.spec.js

@@ -0,0 +1,9 @@
+import { shallowMount } from '@vue/test-utils';
+import WtPageHeader from '../wt-page-header.vue';
+
+describe('WtPageHeader', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtPageHeader);
+    expect(wrapper.isVisible()).toBe(true);
+  });
+});

package/src/components/organisms/wt-page-header/wt-page-header.vue

@@ -0,0 +1,74 @@
+<template>
+  <wt-headline>
+    <template v-slot:title-wrapper>
+      <slot>
+        <template slot="title">
+          <slot name="title"></slot>
+        </template>
+      </slot>
+    </template>
+    <template v-slot:actions>
+      <slot name="actions"></slot>
+      <slot name="primary-action">
+        <wt-button
+          v-if="!hidePrimary"
+          :disabled="primaryDisabled"
+          @click="primaryAction"
+        >
+          {{ primaryText || t('reusable.add') }}
+        </wt-button>
+      </slot>
+      <wt-button
+        v-if="!hideSecondary"
+        color="secondary"
+        @click="secondaryAction"
+      >
+        {{ t('reusable.delete') }}
+      </wt-button>
+    </template>
+  </wt-headline>
+</template>
+
+<script setup>
+import { useI18n } from 'vue-i18n';
+import { computed } from 'vue';
+
+const { t } = useI18n();
+
+const props = defineProps({
+  hidePrimary: {
+    type: Boolean,
+    default: false,
+  },
+  primaryText: {
+    type: String,
+  },
+  primaryAction: {
+    type: Function,
+  },
+  primaryDisabled: {
+    type: Boolean,
+    default: false,
+  },
+  secondaryText: {
+    type: String,
+  },
+  secondaryAction: {
+    type: Function,
+  },
+});
+
+const hideSecondary = computed(() => !(props.secondaryAction || props.secondaryText));
+</script>
+
+<style lang="scss" scoped>
+.wt-headline {
+  .wt-button {
+    margin-left: var(--spacing-sm);
+
+    &:first-child {
+      margin-left: 0;
+    }
+  }
+}
+</style>