@webitel/ui-sdk 3.1.6 → 3.1.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "3.1.6",
+  "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>

package/src/modules/CardStoreModule/composables/useCardStore.js

@@ -0,0 +1,40 @@
+import { computed } from 'vue';
+import { useStore } from 'vuex';
+import getNamespacedState
+  from '@webitel/ui-sdk/src/store/helpers/getNamespacedState';
+
+// eslint-disable-next-line import/prefer-default-export
+export const useCardStore = (namespace) => {
+  const store = useStore();
+
+  const cardNamespace = `${namespace}/card`;
+
+  const id = computed(() => getNamespacedState(store.state, cardNamespace).itemId);
+  const itemInstance = computed(() => getNamespacedState(store.state, cardNamespace).itemInstance);
+
+  function loadItem(payload) {
+    return store.dispatch(`${cardNamespace}/LOAD_ITEM`, payload);
+  }
+
+  function addItem(payload) {
+    return store.dispatch(`${cardNamespace}/ADD_ITEM`, payload);
+  }
+
+  function updateItem(payload) {
+    return store.dispatch(`${cardNamespace}/UPDATE_ITEM`, payload);
+  }
+
+  function setId(payload) {
+    return store.dispatch(`${cardNamespace}/SET_ITEM_ID`, payload);
+  }
+
+  return {
+    id,
+    itemInstance,
+
+    loadItem,
+    addItem,
+    updateItem,
+    setId,
+  };
+};

package/src/modules/TableStoreModule/composables/useTableStore.js

@@ -0,0 +1,68 @@
+import { computed } from 'vue';
+import { useStore } from 'vuex';
+import getNamespacedState
+  from '@webitel/ui-sdk/src/store/helpers/getNamespacedState';
+
+// eslint-disable-next-line import/prefer-default-export
+export const useTableStore = (namespace) => {
+  const store = useStore();
+
+  const tableNamespace = `${namespace}/table`;
+
+  const dataList = computed(() => getNamespacedState(store.state, tableNamespace).dataList);
+
+  const isLoaded = computed(() => getNamespacedState(store.state, tableNamespace).isLoading);
+
+  const headers = computed(() => getNamespacedState(store.state, tableNamespace).headers);
+
+  const isNext = computed(() => getNamespacedState(store.state, tableNamespace).isNext);
+
+  const page = computed(() => getNamespacedState(store.state, tableNamespace).page);
+
+  const size = computed(() => getNamespacedState(store.state, tableNamespace).size);
+
+  async function loadData() {
+    await store.dispatch(`${tableNamespace}/LOAD_DATA_LIST`);
+  }
+
+  async function setSize(payload) {
+    await store.dispatch(`${tableNamespace}/SET_SIZE`, payload);
+  }
+
+  async function nextPage() {
+    await store.dispatch(`${tableNamespace}/SET_NEXT_PAGE`);
+  }
+
+  async function prevPage() {
+    await store.dispatch(`${tableNamespace}/PREV_PAGE`);
+  }
+
+  async function patchProperty(payload) {
+    await store.dispatch(`${tableNamespace}/PATCH_ITEM_PROPERTY`, payload);
+  }
+
+  async function deleteItem(payload) {
+    await store.dispatch(`${tableNamespace}/DELETE_ITEM`, payload);
+  }
+
+  async function sort(...params) {
+    await store.dispatch(`${tableNamespace}/SORT`, { header: params[0], nextSortOrder: params[1] });
+  }
+
+  return {
+    dataList,
+    isLoaded,
+    headers,
+    isNext,
+    page,
+    size,
+
+    loadData,
+    setSize,
+    nextPage,
+    prevPage,
+    patchProperty,
+    deleteItem,
+    sort,
+  };
+};