@tager/admin-blog 0.3.43 → 1.0.0

package/dist/views/Posts/PostForm/components/TabList/TabList.types.d.ts

@@ -1,5 +1,5 @@
-export declare type TabType = {
-    id: string;
-    label: string;
-    hasErrors?: boolean;
-};
+export declare type TabType = {
+    id: string;
+    label: string;
+    hasErrors?: boolean;
+};

package/dist/views/Posts/PostForm/components/TabList/TabList.vue.d.ts

@@ -0,0 +1,23 @@
+import { TabType } from './TabList.types';
+declare const _default: import("vue").DefineComponent<{
+    tabList: {
+        type: () => TabType[];
+        required: true;
+    };
+    selectedTabId: {
+        type: StringConstructor;
+        required: true;
+    };
+}, {
+    handleTabClick: (tabId: TabType['id']) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    tabList: {
+        type: () => TabType[];
+        required: true;
+    };
+    selectedTabId: {
+        type: StringConstructor;
+        required: true;
+    };
+}>>, {}>;
+export default _default;

package/dist/views/Posts/PostForm/components/TabList/index.d.ts

@@ -1,2 +1,2 @@
-export { default } from './TabList.vue';
-export * from './TabList.types';
+export { default } from './TabList.vue';
+export * from './TabList.types';

package/dist/views/Posts/PostForm/index.d.ts

@@ -1 +1 @@
-export { default } from './PostForm.vue';
+export { default } from './PostForm.vue';

package/dist/views/Posts/PostList/PostList.helpers.d.ts

@@ -1,7 +1,7 @@
-import { TFunction } from 'i18next';
-import { Nullable } from '@tager/admin-services';
-import { ColumnDefinition } from '@tager/admin-ui';
-import { Category, ModuleConfig, Language, PostShort } from '../../../typings/model';
-export declare function convertPostList(postList: PostShort[], selectedCategory: Nullable<Category>, languages: Language[]): PostShort[];
-export declare function getStatuses(t: TFunction): Record<string, string>;
-export declare function getPostTableColumnDefs(moduleConfig: Nullable<ModuleConfig>, t: TFunction): ColumnDefinition<PostShort>[];
+import { TFunction } from 'i18next';
+import { Nullable } from '@tager/admin-services';
+import { ColumnDefinition } from '@tager/admin-ui';
+import { Category, ModuleConfig, Language, PostShort } from '../../../typings/model';
+export declare function convertPostList(postList: PostShort[], selectedCategory: Nullable<Category>, languages: Language[]): PostShort[];
+export declare function getStatuses(t: TFunction): Record<string, string>;
+export declare function getPostTableColumnDefs(moduleConfig: Nullable<ModuleConfig>, t: TFunction): ColumnDefinition<PostShort>[];

package/dist/views/Posts/PostList/PostList.vue.d.ts

@@ -1,78 +1,38 @@
-import { ColumnDefinition, OptionType, formatDateTime } from '@tager/admin-ui';
-import { getBlogPostFormUrl } from '../../../constants/paths';
-import { Category, PostShort } from '../../../typings/model';
-import { getStatuses } from './PostList.helpers';
-declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<{
-    t: import("i18next").TFunction;
-    formatDateTime: typeof formatDateTime;
-    columnDefs: import("@vue/composition-api").ComputedRef<ColumnDefinition<PostShort>[]>;
-    rowData: import("@vue/composition-api").ComputedRef<PostShort[]>;
-    handleResourceDelete: (entityId: string | number) => void;
-    isDeleting: (entityId: string | number) => boolean;
-    categoryList: import("@vue/composition-api").Ref<Category[]>;
-    isRowDataLoading: import("@vue/composition-api").ComputedRef<boolean>;
-    errorMessage: import("@vue/composition-api").Ref<string | null>;
-    getBlogPostFormUrl: typeof getBlogPostFormUrl;
-    pageTitle: import("@vue/composition-api").ComputedRef<string>;
-    searchQuery: import("@vue/composition-api").Ref<string>;
-    handleChange: (event: import("@tager/admin-ui").TableChangeEvent) => void;
-    pageNumber: import("@vue/composition-api").Ref<number>;
-    pageCount: import("@vue/composition-api").ComputedRef<number>;
-    pageSize: import("@vue/composition-api").Ref<number>;
-    categoryFilter: import("@vue/composition-api").Ref<OptionType<string>[]>;
-    categoryOptionList: import("@vue/composition-api").ComputedRef<OptionType<string>[]>;
-    isLangSpecific: import("@vue/composition-api").ComputedRef<boolean>;
-    languageFilter: import("@vue/composition-api").Ref<OptionType<string>[]>;
-    languageOptionList: import("@vue/composition-api").ComputedRef<OptionType<string>[]>;
-    fromDateFilter: import("@vue/composition-api").Ref<string>;
-    toDateFilter: import("@vue/composition-api").Ref<string>;
-    statusFilter: import("@vue/composition-api").Ref<OptionType<string>[]>;
-    statusOptionList: import("@vue/composition-api").ComputedRef<OptionType<string>[]>;
-    tags: import("@vue/composition-api").ComputedRef<import("@tager/admin-ui").FilterTagType[]>;
-    tagRemovalHandler: (event: import("@tager/admin-ui").FilterTagType) => void;
-    getStatuses: typeof getStatuses;
-    handleResourceClone: (entityId: string | number) => void;
-    isBusy: (postId: number) => boolean;
-}> & {
-    [key: string]: unknown;
-}, {}, {}, unknown, {
-    [x: string]: any;
-}> & import("vue").VueConstructor<import("vue").default> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
-    [x: string]: any;
-}, import("@vue/composition-api").ShallowUnwrapRef<{
-    t: import("i18next").TFunction;
-    formatDateTime: typeof formatDateTime;
-    columnDefs: import("@vue/composition-api").ComputedRef<ColumnDefinition<PostShort>[]>;
-    rowData: import("@vue/composition-api").ComputedRef<PostShort[]>;
-    handleResourceDelete: (entityId: string | number) => void;
-    isDeleting: (entityId: string | number) => boolean;
-    categoryList: import("@vue/composition-api").Ref<Category[]>;
-    isRowDataLoading: import("@vue/composition-api").ComputedRef<boolean>;
-    errorMessage: import("@vue/composition-api").Ref<string | null>;
-    getBlogPostFormUrl: typeof getBlogPostFormUrl;
-    pageTitle: import("@vue/composition-api").ComputedRef<string>;
-    searchQuery: import("@vue/composition-api").Ref<string>;
-    handleChange: (event: import("@tager/admin-ui").TableChangeEvent) => void;
-    pageNumber: import("@vue/composition-api").Ref<number>;
-    pageCount: import("@vue/composition-api").ComputedRef<number>;
-    pageSize: import("@vue/composition-api").Ref<number>;
-    categoryFilter: import("@vue/composition-api").Ref<OptionType<string>[]>;
-    categoryOptionList: import("@vue/composition-api").ComputedRef<OptionType<string>[]>;
-    isLangSpecific: import("@vue/composition-api").ComputedRef<boolean>;
-    languageFilter: import("@vue/composition-api").Ref<OptionType<string>[]>;
-    languageOptionList: import("@vue/composition-api").ComputedRef<OptionType<string>[]>;
-    fromDateFilter: import("@vue/composition-api").Ref<string>;
-    toDateFilter: import("@vue/composition-api").Ref<string>;
-    statusFilter: import("@vue/composition-api").Ref<OptionType<string>[]>;
-    statusOptionList: import("@vue/composition-api").ComputedRef<OptionType<string>[]>;
-    tags: import("@vue/composition-api").ComputedRef<import("@tager/admin-ui").FilterTagType[]>;
-    tagRemovalHandler: (event: import("@tager/admin-ui").FilterTagType) => void;
-    getStatuses: typeof getStatuses;
-    handleResourceClone: (entityId: string | number) => void;
-    isBusy: (postId: number) => boolean;
-}>, {
-    [x: string]: any;
-}, {}, {}, {
-    [x: string]: any;
-}>);
-export default _default;
+import { ColumnDefinition, OptionType, formatDateTime } from '@tager/admin-ui';
+import { Nullable } from '@tager/admin-services';
+import { getBlogPostFormUrl } from '../../../utils/paths';
+import { Category, PostShort } from '../../../typings/model';
+import { getStatuses } from './PostList.helpers';
+declare const _default: import("vue").DefineComponent<{}, {
+    t: import("i18next").TFunction;
+    formatDateTime: typeof formatDateTime;
+    columnDefs: import("vue").ComputedRef<ColumnDefinition<PostShort>[]>;
+    rowData: import("vue").ComputedRef<PostShort[]>;
+    handleResourceDelete: (entityId: string | number) => void;
+    isDeleting: (entityId: string | number) => boolean;
+    categoryList: import("vue").Ref<Category[]>;
+    isRowDataLoading: import("vue").ComputedRef<boolean>;
+    errorMessage: import("vue").Ref<Nullable<string>>;
+    getBlogPostFormUrl: typeof getBlogPostFormUrl;
+    pageTitle: import("vue").ComputedRef<string>;
+    searchQuery: import("vue").Ref<string>;
+    handleChange: (event: import("@tager/admin-ui/dist/components/DataTable/DataTable.types").TableChangeEvent) => void;
+    pageNumber: import("vue").Ref<number>;
+    pageCount: import("vue").ComputedRef<number>;
+    pageSize: import("vue").Ref<number>;
+    categoryFilter: import("vue").Ref<OptionType<string>[]>;
+    categoryOptionList: import("vue").ComputedRef<OptionType<string>[]>;
+    isLangSpecific: import("vue").ComputedRef<boolean>;
+    languageFilter: import("vue").Ref<OptionType<string>[]>;
+    languageOptionList: import("vue").ComputedRef<OptionType<string>[]>;
+    fromDateFilter: import("vue").Ref<string>;
+    toDateFilter: import("vue").Ref<string>;
+    statusFilter: import("vue").Ref<OptionType<string>[]>;
+    statusOptionList: import("vue").ComputedRef<OptionType<string>[]>;
+    tags: import("vue").ComputedRef<import("@tager/admin-ui").FilterTagType[]>;
+    tagRemovalHandler: (event: import("@tager/admin-ui").FilterTagType) => void;
+    getStatuses: typeof getStatuses;
+    handleResourceClone: (entityId: string | number) => void;
+    isBusy: (postId: number) => boolean;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+export default _default;

package/dist/views/Posts/PostList/hooks/index.d.ts

@@ -1 +1 @@
-export { useAdvancedSearch } from './useAdvancedSearch';
+export { useAdvancedSearch } from './useAdvancedSearch';

package/dist/views/Posts/PostList/hooks/useAdvancedSearch.d.ts

@@ -1,24 +1,27 @@
-import { ComputedRef, Ref, SetupContext } from '@vue/composition-api';
-import { FilterTagType, OptionType } from '@tager/admin-ui';
-import { Category, Language } from '../../../../typings/model';
-interface Params {
-    context: SetupContext;
-    categoryList: ComputedRef<Category[]>;
-    languageList: ComputedRef<Language[]>;
-    statusOptionList: ComputedRef<OptionType[]>;
-}
-interface State {
-    categoryFilter: Ref<OptionType[]>;
-    categoryOptionList: ComputedRef<OptionType[]>;
-    languageFilter: Ref<OptionType[]>;
-    languageOptionList: ComputedRef<OptionType[]>;
-    fromDateFilter: Ref<string>;
-    toDateFilter: Ref<string>;
-    statusFilter: Ref<OptionType[]>;
-    filterParams: ComputedRef<Record<string, string | string[]>>;
-    tags: ComputedRef<FilterTagType[]>;
-    tagRemovalHandler(event: FilterTagType): void;
-}
-export declare const dateFormat: (date: string) => string;
-export declare function useAdvancedSearch({ context, categoryList, languageList, statusOptionList, }: Params): State;
-export {};
+import { ComputedRef, Ref } from 'vue';
+import { TFunction } from 'i18next';
+import { RouteLocationNormalizedLoaded } from 'vue-router';
+import { FilterTagType, OptionType } from '@tager/admin-ui';
+import { Category, Language } from '../../../../typings/model';
+interface Params {
+    categoryList: Ref<Category[]>;
+    languageList: ComputedRef<Language[]>;
+    statusOptionList: ComputedRef<OptionType[]>;
+    t: TFunction;
+    route: RouteLocationNormalizedLoaded;
+}
+interface State {
+    categoryFilter: Ref<OptionType[]>;
+    categoryOptionList: ComputedRef<OptionType[]>;
+    languageFilter: Ref<OptionType[]>;
+    languageOptionList: ComputedRef<OptionType[]>;
+    fromDateFilter: Ref<string>;
+    toDateFilter: Ref<string>;
+    statusFilter: Ref<OptionType[]>;
+    filterParams: ComputedRef<Record<string, string | string[]>>;
+    tags: ComputedRef<FilterTagType[]>;
+    tagRemovalHandler(event: FilterTagType): void;
+}
+export declare const dateFormat: (date: string) => string;
+export declare function useAdvancedSearch({ t, route, categoryList, languageList, statusOptionList, }: Params): State;
+export {};

package/dist/views/Posts/PostList/index.d.ts

@@ -1 +1 @@
-export { default } from './PostList.vue';
+export { default } from './PostList.vue';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tager/admin-blog",
-  "version": "0.3.43",
+  "version": "1.0.0",
   "license": "MIT",
   "main": "dist/index.umd.js",
   "module": "dist/index.esm.js",
@@ -10,65 +10,67 @@
     "typings",
     "src"
   ],
+  "exports": {
+    "./css": "./dist/style.css",
+    ".": "./dist/index.mjs"
+  },
   "scripts": {
+    "build:js": "vite build",
+    "build:package": "concurrently --success first \"yarn build:js\" \"yarn emit-declarations\"",
+    "emit-declarations": "vue-tsc --project tsconfig.json --emitDeclarationOnly",
     "start": "vue-cli-service serve",
-    "lint": "vue-cli-service lint",
-    "build": "rollup --config",
-    "prepare": "yarn build",
-    "tager:update": "node scripts/tager-update.js",
-    "yalc:clean": "yalc remove --all"
+    "prepare": "yarn build:package",
+    "tager:update": "yarn upgrade --latest --scope @tager"
   },
   "dependencies": {
+    "filesize": "^9.0.11",
     "lodash.isequal": "^4.5.0",
+    "lodash.kebabcase": "^4.1.1",
     "lodash.pick": "^4.4.0",
     "path-to-regexp": "^6.1.0"
   },
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^15.0.0",
-    "@rollup/plugin-node-resolve": "^9.0.0",
-    "@tager/admin-dynamic-field": "^0.1.18",
-    "@tager/admin-layout": "^0.5.4",
-    "@tager/admin-services": "^0.2.26",
-    "@tager/admin-ui": "^0.8.96",
-    "@types/lodash.isequal": "^4.5.5",
-    "@types/lodash.pick": "^4.4.6",
-    "@types/node": "12.x",
-    "@typescript-eslint/eslint-plugin": "^2.26.0",
-    "@typescript-eslint/parser": "^2.26.0",
-    "@vue/cli-plugin-babel": "~4.5.6",
-    "@vue/cli-plugin-eslint": "~4.5.6",
-    "@vue/cli-plugin-router": "~4.5.6",
-    "@vue/cli-plugin-typescript": "~4.5.6",
-    "@vue/cli-service": "~4.5.6",
-    "@vue/composition-api": "^1.0.0-beta.14",
-    "@vue/eslint-config-prettier": "^6.0.0",
-    "@vue/eslint-config-typescript": "^5.1.0",
-    "babel-eslint": "^10.1.0",
-    "core-js": "^3.6.5",
-    "eslint": "^6.7.2",
-    "eslint-plugin-import": "^2.22.0",
-    "eslint-plugin-prettier": "^3.1.4",
-    "eslint-plugin-vue": "^6.2.2",
-    "prettier": "^2.1.2",
-    "rollup": "^2.27.1",
-    "rollup-plugin-typescript2": "^0.27.2",
-    "rollup-plugin-vue": "^5.1.9",
-    "sass-loader": "^10.0.2",
-    "typescript": "~3.9.10",
-    "vue": "2.6.x",
-    "vue-router": "^3.5.1",
-    "vue-template-compiler": "^2.6.11"
+    "@babel/core": "^7.17.9",
+    "@babel/eslint-parser": "^7.17.0",
+    "@rushstack/eslint-patch": "^1.1.2",
+    "@tager/admin-dynamic-field": "^1.0.0",
+    "@tager/admin-layout": "^1.0.0",
+    "@tager/admin-services": "^1.0.0",
+    "@tager/admin-ui": "^1.0.1",
+    "@types/filesize": "^5.0.0",
+    "@types/lodash.isequal": "^4.5.6",
+    "@types/lodash.pick": "^4.4.7",
+    "@types/node": "16.x",
+    "@typescript-eslint/eslint-plugin": "^5.21.0",
+    "@typescript-eslint/parser": "^5.21.0",
+    "@vitejs/plugin-vue": "^2.3.1",
+    "@vue/cli-plugin-babel": "^5.0.4",
+    "@vue/cli-plugin-typescript": "^5.0.4",
+    "@vue/cli-service": "~5.0.0",
+    "@vue/eslint-config-prettier": "^7.0.0",
+    "@vue/eslint-config-typescript": "^10.0.0",
+    "concurrently": "^7.1.0",
+    "core-js": "^3.22.3",
+    "eslint": "^8.14.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-vue": "^8.7.1",
+    "pinia": "^2.0.21",
+    "sass": "^1.51.0",
+    "sass-loader": "^12.6.0",
+    "typescript": "^4.6.3",
+    "vite": "^2.9.6",
+    "vue": "^3.2.31",
+    "vue-router": "^4.0.14",
+    "vue-tsc": "^0.34.10"
   },
   "peerDependencies": {
-    "@tager/admin-dynamic-field": ">=0.1.3",
-    "@tager/admin-layout": ">=0.4.2",
-    "@tager/admin-services": ">=0.2.12",
-    "@tager/admin-ui": ">=0.7.5",
-    "@vue/composition-api": ">=1.0.0-beta.14",
-    "vue": "2.6.x"
-  },
-  "resolutions": {
-    "prettier": "2.x"
+    "@tager/admin-layout": "^1.0.0",
+    "@tager/admin-services": "^1.0.0",
+    "@tager/admin-ui": "^1.0.1",
+    "vue": "^3.2.31",
+    "vue-router": "^4.0.14"
   },
   "publishConfig": {
     "access": "public"

package/src/constants/paths.ts

@@ -1,28 +1,6 @@
-import { compile } from 'path-to-regexp';
-
 export const BLOG_ROUTE_PATHS = {
   POST_LIST: '/blog/posts',
   POST_FORM: '/blog/posts/:postId',
   CATEGORY_LIST: '/blog/categories',
   CATEGORY_FORM: '/blog/categories/:categoryId',
 } as const;
-
-export function getBlogPostListUrl() {
-  return BLOG_ROUTE_PATHS.POST_LIST;
-}
-
-export function getBlogPostFormUrl(params: { postId: number | string }) {
-  return compile(BLOG_ROUTE_PATHS.POST_FORM)({ postId: params.postId });
-}
-
-export function getBlogCategoryListUrl() {
-  return BLOG_ROUTE_PATHS.CATEGORY_LIST;
-}
-
-export function getBlogCategoryFormUrl(params: {
-  categoryId: number | string;
-}) {
-  return compile(BLOG_ROUTE_PATHS.CATEGORY_FORM)({
-    categoryId: params.categoryId,
-  });
-}

package/src/constants/routes.ts

@@ -1,4 +1,4 @@
-import { CustomRoute, CustomRouteConfig } from '@tager/admin-layout';
+import { type RouteRecordRaw } from 'vue-router';
 
 import BlogPostList from '../views/Posts/PostList';
 import BlogPostForm from '../views/Posts/PostForm';
@@ -7,24 +7,24 @@ import BlogCategoryForm from '../views/Categories/CategoryForm';
 
 import { BLOG_ROUTE_PATHS } from './paths';
 
-export const BLOG_POST_LIST_ROUTE: CustomRouteConfig = {
+export const BLOG_POST_LIST_ROUTE: RouteRecordRaw = {
   path: BLOG_ROUTE_PATHS.POST_LIST,
   component: BlogPostList,
   name: 'All posts',
   meta: {
-    getBreadcrumbs: (route, t) => [
+    getBreadcrumbs: (route, { t }) => [
       { url: '/', text: t('blog:home') },
       { url: BLOG_ROUTE_PATHS.POST_LIST, text: t('blog:allPosts') },
     ],
   },
 };
 
-export const BLOG_POST_FORM_ROUTE: CustomRouteConfig = {
+export const BLOG_POST_FORM_ROUTE: RouteRecordRaw = {
   path: BLOG_ROUTE_PATHS.POST_FORM,
   component: BlogPostForm,
   name: 'Post Form',
   meta: {
-    getBreadcrumbs: (route: CustomRoute, t) => [
+    getBreadcrumbs: (route, { t }) => [
       { url: '/', text: t('blog:home') },
       { url: BLOG_ROUTE_PATHS.POST_LIST, text: t('blog:allPosts') },
       { url: route.path, text: t('blog:postForm') },
@@ -32,24 +32,24 @@ export const BLOG_POST_FORM_ROUTE: CustomRouteConfig = {
   },
 };
 
-export const BLOG_CATEGORY_LIST_ROUTE: CustomRouteConfig = {
+export const BLOG_CATEGORY_LIST_ROUTE: RouteRecordRaw = {
   path: BLOG_ROUTE_PATHS.CATEGORY_LIST,
   component: BlogCategoryList,
   name: 'All categories',
   meta: {
-    getBreadcrumbs: (route, t) => [
+    getBreadcrumbs: (route, { t }) => [
       { url: '/', text: t('blog:home') },
       { url: BLOG_ROUTE_PATHS.CATEGORY_LIST, text: t('blog:allCategories') },
     ],
   },
 };
 
-export const BLOG_CATEGORY_FORM_ROUTE: CustomRouteConfig = {
+export const BLOG_CATEGORY_FORM_ROUTE: RouteRecordRaw = {
   path: BLOG_ROUTE_PATHS.CATEGORY_FORM,
   component: BlogCategoryForm,
   name: 'Category Form',
   meta: {
-    getBreadcrumbs: (route: CustomRoute, t) => [
+    getBreadcrumbs: (route, { t }) => [
       { url: '/', text: t('blog:home') },
       { url: BLOG_ROUTE_PATHS.CATEGORY_LIST, text: t('blog:allCategories') },
       { url: route.path, text: t('blog:categoryForm') },

package/src/dev/App.vue

@@ -0,0 +1,56 @@
+<template>
+  <PageLayout :sidebar-menu-list="sidebarMenuList">
+    <router-view />
+  </PageLayout>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+import { MenuItemType, PageLayout } from '@tager/admin-layout';
+import { ViewListIcon } from '@tager/admin-ui';
+import { useI18n } from '@tager/admin-services';
+
+import {
+  getBlogCategoryFormUrl,
+  getBlogCategoryListUrl,
+  getBlogPostFormUrl,
+  getBlogPostListUrl,
+} from '../utils/paths';
+
+export default defineComponent({
+  name: 'App',
+  components: {
+    PageLayout,
+  },
+  setup() {
+    const i18n = useI18n();
+
+    const sidebarMenuList: Array<MenuItemType> = [
+      {
+        id: 'blog',
+        text: i18n.t('blog:blog'),
+        icon: ViewListIcon,
+        children: [
+          {
+            text: i18n.t('blog:createPost'),
+            url: getBlogPostFormUrl({ postId: 'create' }),
+          },
+          { text: i18n.t('blog:posts'), url: getBlogPostListUrl() },
+          {
+            text: i18n.t('blog:createCategory'),
+            url: getBlogCategoryFormUrl({ categoryId: 'create' }),
+          },
+          { text: i18n.t('blog:categories'), url: getBlogCategoryListUrl() },
+        ],
+      },
+    ];
+
+    return {
+      sidebarMenuList,
+    };
+  },
+});
+</script>
+
+<style scoped lang="scss"></style>

package/src/dev/config.ts

@@ -0,0 +1,23 @@
+import type { AppConfigType } from '@tager/admin-services';
+
+export const OZITAG_CONFIG: AppConfigType = {
+  APP_NAME: 'OZiTAG_ADMIN',
+  TITLE_TEMPLATE: 'OZiTAG Admin - {{title}}',
+  LANGUAGE: 'EN',
+  BRAND: {
+    small: {
+      logo: 'logo-small.svg',
+    },
+    large: {
+      logo: 'logo.svg',
+      label: 'OZiTAG',
+      'label-color': '#DD6900',
+    },
+    subtitle: '',
+  },
+  SPLASH_SCREEN: {
+    enabled: true,
+    logo: 'logo-white.svg',
+    background: '#1e1e1e',
+  },
+};

package/src/dev/env.ts

@@ -0,0 +1,17 @@
+import { initializeEnvironment } from '@tager/admin-services';
+
+export function populateEnvironment() {
+  initializeEnvironment({
+    publicPath: process.env.VUE_APP_PUBLIC_PATH,
+    appEnv: process.env.VUE_APP_ENV,
+    apiUrl: process.env.VUE_APP_API_URL,
+    accessToken: process.env.VUE_APP_ACCESS_TOKEN,
+    websiteUrl: process.env.VUE_APP_WEBSITE_URL,
+    websiteButtonUrl: process.env.VUE_APP_WEBSITE_BUTTON_URL,
+    sentryDsn: process.env.VUE_APP_SENTRY_DSN,
+    sentryEnv: process.env.VUE_APP_SENTRY_ENVIRONMENT,
+    baseUrl: process.env.BASE_URL,
+    nodeEnv: process.env.NODE_ENV,
+    version: process.env.VUE_APP_VERSION,
+  });
+}

package/src/dev/main.ts

@@ -0,0 +1,49 @@
+import { createApp } from 'vue';
+import { createPinia } from 'pinia';
+
+import { configStore, i18n, i18nPlugin } from '@tager/admin-services';
+import { createRouter } from '@tager/admin-layout';
+import '@tager/admin-ui/css';
+import '@tager/admin-layout/css';
+import '@tager/admin-dynamic-field/css';
+
+import { applyTranslations } from '../locales/apply';
+import {
+  BLOG_POST_LIST_ROUTE,
+  BLOG_CATEGORY_FORM_ROUTE,
+  BLOG_CATEGORY_LIST_ROUTE,
+  BLOG_POST_FORM_ROUTE,
+} from '../constants/routes';
+
+import { OZITAG_CONFIG } from './config';
+import App from './App.vue';
+import { populateEnvironment } from './env';
+
+populateEnvironment();
+
+configStore.setConfig(OZITAG_CONFIG);
+
+const router = createRouter(
+  {
+    routes: [
+      BLOG_POST_LIST_ROUTE,
+      BLOG_CATEGORY_FORM_ROUTE,
+      BLOG_CATEGORY_LIST_ROUTE,
+      BLOG_POST_FORM_ROUTE,
+    ],
+  },
+  { useTitleSync: false }
+);
+
+const app = createApp(App);
+const pinia = createPinia();
+
+app.use(router);
+app.use(i18nPlugin);
+app.use(pinia);
+
+applyTranslations();
+
+i18n.init({ debug: true, lng: 'ru' }).then(() => {
+  app.mount('#app');
+});

package/src/hooks/useFetchCategories.ts

@@ -1,19 +1,14 @@
-import { onMounted, SetupContext } from '@vue/composition-api';
+import { onMounted } from 'vue';
 
 import { ResourceRef, useResource } from '@tager/admin-services';
 
 import { Category } from '../typings/model';
 import { getCategories } from '../services/requests';
 
-export function useFetchCategories({
-  context,
-}: {
-  context: SetupContext;
-}): ResourceRef<Category[]> {
+export function useFetchCategories(): ResourceRef<Category[]> {
   const [fetchCategories, resource] = useResource<Category[]>({
     fetchResource: getCategories,
     initialValue: [],
-    context,
     resourceName: 'Blog categories',
   });