@webitel/ui-sdk 3.1.54 → 3.1.55

package/package.json

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

package/src/components/index.js

@@ -34,6 +34,7 @@ import WtButtonSelect from './molecules/wt-button-select/wt-button-select.vue';
 import WtHint from './molecules/wt-hint/wt-hint.vue';
 import WtCopyAction from './molecules/wt-copy-action/wt-copy-action.vue';
 import WtLoadBar from './molecules/wt-load-bar/wt-load-bar.vue';
+import WtItemLink from './molecules/wt-item-link/wt-item-link.vue';
 
 import WtAppHeader from './organisms/wt-app-header/wt-app-header.vue';
 import WtAppNavigator from './organisms/wt-app-header/wt-app-navigator.vue';
@@ -107,6 +108,7 @@ const Components = {
   WtLoadBar,
   WtIconAction,
   WtPageHeader,
+  WtItemLink,
 };
 
 export default Components;

package/src/components/molecules/wt-item-link/__tests__/WtItemLink.spec.js

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

package/src/components/molecules/wt-item-link/wt-item-link.vue

@@ -0,0 +1,48 @@
+<template>
+  <router-link
+    :target="target"
+    :to="to"
+    class="wt-item-link"
+  >
+    <slot></slot>
+  </router-link>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+  link: {
+    type: [String, Object],
+    default: '',
+  },
+  target: {
+    type: String,
+    default: '_self',
+  },
+  routeName: {
+    type: String,
+  },
+  id: {
+    type: [String, Number],
+  },
+});
+
+const to = computed(() => props.link || {
+    name: `${props.routeName}-edit`,
+    params: { id: props.id },
+  });
+</script>
+
+<style lang="scss" scoped>
+.wt-item-link {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  transition: var(--transition);
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+</style>