@tager/admin-files 0.0.7 → 1.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tager/admin-files",
-  "version": "0.0.7",
+  "version": "1.0.1",
   "license": "MIT",
   "main": "dist/index.umd.js",
   "module": "dist/index.esm.js",
@@ -10,63 +10,61 @@
     "typings",
     "src"
   ],
+  "exports": {
+    ".": "./dist/index.mjs"
+  },
   "scripts": {
-    "start": "vue-cli-service serve",
-    "lint": "vue-cli-service lint",
-    "build": "rollup --config",
-    "prepare": "vue-docgen-web-types && yarn build",
-    "tager:update": "node scripts/tager-update.js",
-    "yalc:clean": "yalc remove --all"
+    "build:js": "vite build",
+    "build:package": "yarn build:js && (yarn emit-declarations || echo 'vue-tsc: type errors found, declarations emitted anyway')",
+    "emit-declarations": "vue-tsc --project tsconfig.json --emitDeclarationOnly",
+    "start": "vite",
+    "prepare": "yarn build:package",
+    "tager:update": "yarn upgrade --latest --scope @tager",
+    "lint": "eslint .",
+    "format": "prettier --write src"
   },
   "dependencies": {
-    "filesize": "^7.0.0",
+    "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": "^14.0.0",
-    "@rollup/plugin-node-resolve": "^8.1.0",
-    "@tager/admin-layout": "^0.5.1",
-    "@tager/admin-services": "^0.2.23",
-    "@tager/admin-ui": "^0.8.78",
-    "@types/lodash.kebabcase": "^4.1.6",
-    "@types/node": "12.x",
-    "@typescript-eslint/eslint-plugin": "^2.26.0",
-    "@typescript-eslint/parser": "^2.26.0",
-    "@vue/cli-plugin-babel": "~4.4.6",
-    "@vue/cli-plugin-eslint": "~4.4.6",
-    "@vue/cli-plugin-router": "~4.4.6",
-    "@vue/cli-plugin-typescript": "~4.4.6",
-    "@vue/cli-service": "~4.4.6",
-    "@vue/composition-api": "^1.0.0-beta.14",
-    "@vue/eslint-config-prettier": "^6.0.0",
-    "@vue/eslint-config-typescript": "^5.0.2",
-    "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.0.5",
-    "rollup": "^2.23.1",
-    "rollup-plugin-typescript2": "^0.27.2",
-    "rollup-plugin-vue": "^5.1.9",
-    "sass-loader": "^9.0.3",
-    "typescript": "~3.9.6",
-    "vue": "2.6.x",
-    "vue-docgen-web-types": "^0.1.6",
-    "vue-router": "^3.5.1",
-    "vue-template-compiler": "^2.6.11"
+    "@eslint/js": "^9.39.5",
+    "@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",
+    "@vitejs/plugin-vue": "^5.2.4",
+    "@vue/eslint-config-typescript": "^14.9.0",
+    "core-js": "^3.22.3",
+    "eslint": "^9.39.5",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-import-resolver-typescript": "^4.4.5",
+    "eslint-plugin-import": "^2.32.0",
+    "eslint-plugin-vue": "^10.12.0",
+    "globals": "^16.5.0",
+    "prettier": "^3.9.10",
+    "sass": "^1.51.0",
+    "sass-loader": "^12.6.0",
+    "typescript": "^5.9.3",
+    "vite": "^6.4.5",
+    "vue": "^3.2.31",
+    "vue-eslint-parser": "^10.4.1",
+    "vue-router": "^4.0.14",
+    "vue-tsc": "^3.3.14"
   },
   "peerDependencies": {
-    "@tager/admin-layout": ">=0.4.2",
-    "@tager/admin-services": ">=0.2.11",
-    "@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/routes.ts

@@ -1,31 +1,31 @@
-import { CustomRouteConfig } from '@tager/admin-layout';
+import type { RouteRecordRaw } from 'vue-router';
 
 import FilesList from '../views/FilesList';
 import FilesForm from '../views/FilesForm';
 
 import { FILES_ROUTE_PATHS } from './paths';
 
-export const FILES_LIST_ROUTE: CustomRouteConfig = {
+export const FILES_LIST_ROUTE: RouteRecordRaw = {
   path: FILES_ROUTE_PATHS.FILES_LIST,
   component: FilesList,
   name: 'Files List',
   meta: {
-    getBreadcrumbs: (route, t) => [
-      { url: '/', text: t('files:home') },
-      { url: route.path, text: t('files:filesList') },
+    getBreadcrumbs: (route, i18n) => [
+      { url: '/', text: i18n.t('files:home') },
+      { url: route.path, text: i18n.t('files:filesList') },
     ],
   },
 };
 
-export const FILES_FORM_ROUTE: CustomRouteConfig = {
+export const FILES_FORM_ROUTE: RouteRecordRaw = {
   path: FILES_ROUTE_PATHS.FILES_FORM,
   component: FilesForm,
   name: 'Files Form',
   meta: {
-    getBreadcrumbs: (route, t) => [
-      { url: '/', text: t('files:home') },
-      { url: FILES_LIST_ROUTE.path, text: t('files:filesList') },
-      { url: route.path, text: t('files:filesForm') },
+    getBreadcrumbs: (route, i18n) => [
+      { url: '/', text: i18n.t('files:home') },
+      { url: FILES_LIST_ROUTE.path, text: i18n.t('files:filesList') },
+      { url: route.path, text: i18n.t('files:filesForm') },
     ],
   },
 };

package/src/dev/App.vue

@@ -0,0 +1,38 @@
+<template>
+  <PageLayout :sidebar-menu-list="sidebarMenuList">
+    <router-view/>
+  </PageLayout>
+</template>
+
+<script lang="ts">
+import {defineComponent} from 'vue';
+
+import {type MenuItemType, PageLayout} from "@tager/admin-layout";
+import {ViewListIcon} from "@tager/admin-ui";
+import {useI18n} from "@tager/admin-services";
+
+import {getFilesListUrl} from '../utils/paths';
+
+export default defineComponent({
+  name: 'App',
+  components: {
+    PageLayout,
+  },
+  setup() {
+    const i18n = useI18n();
+
+    const sidebarMenuList: Array<MenuItemType> = [
+      {
+        id: 'files',
+        text: i18n.t('files:files'),
+        icon: ViewListIcon,
+        children: [{text: i18n.t('files:files'), url: getFilesListUrl()}],
+      },
+    ];
+
+    return {
+      sidebarMenuList,
+    };
+  },
+});
+</script>

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: import.meta.env.VUE_APP_PUBLIC_PATH,
+    appEnv: import.meta.env.VUE_APP_ENV,
+    apiUrl: import.meta.env.VUE_APP_API_URL,
+    accessToken: import.meta.env.VUE_APP_ACCESS_TOKEN,
+    websiteUrl: import.meta.env.VUE_APP_WEBSITE_URL,
+    websiteButtonUrl: import.meta.env.VUE_APP_WEBSITE_BUTTON_URL,
+    sentryDsn: import.meta.env.VUE_APP_SENTRY_DSN,
+    sentryEnv: import.meta.env.VUE_APP_SENTRY_ENVIRONMENT,
+    baseUrl: import.meta.env.BASE_URL,
+    nodeEnv: import.meta.env.MODE,
+    version: import.meta.env.VUE_APP_VERSION,
+  });
+}

package/src/dev/main.ts

@@ -0,0 +1,36 @@
+import {createApp} from 'vue';
+
+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 {FILES_LIST_ROUTE, FILES_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: [FILES_LIST_ROUTE, FILES_FORM_ROUTE],
+    },
+    {useTitleSync: false}
+);
+
+const app = createApp(App);
+
+app.use(router);
+app.use(i18nPlugin);
+
+applyTranslations();
+
+i18n.init({debug: true, lng: 'ru'}).then(() => {
+    app.mount('#app');
+});

package/src/locales/apply.ts

@@ -0,0 +1,9 @@
+import { i18n } from '@tager/admin-services';
+
+import { EN } from './en';
+import { RU } from './ru';
+
+export function applyTranslations() {
+  i18n.addTranslations('en', 'files', EN);
+  i18n.addTranslations('ru', 'files', RU);
+}

package/src/locales/en.ts

@@ -1,4 +1,4 @@
-const EN = {
+export const EN = {
   home: 'Home',
   success: 'Success',
   error: 'Error',
@@ -17,5 +17,3 @@ const EN = {
   delete: 'Delete',
   add: 'Add',
 };
-
-export default EN;

package/src/locales/ru.ts

@@ -1,6 +1,6 @@
-import EN from './en';
+import {EN} from './en';
 
-const RU: typeof EN = {
+export const RU: typeof EN = {
   home: 'Главная',
   success: 'Успех',
   error: 'Ошибка',
@@ -19,5 +19,3 @@ const RU: typeof EN = {
   delete: 'Удалить',
   add: 'Добавить',
 };
-
-export default RU;

package/src/main.ts

@@ -1,10 +1,6 @@
-import { i18n } from '@tager/admin-services';
+import { applyTranslations } from './locales/apply';
 
-import EN from './locales/en';
-import RU from './locales/ru';
-
-i18n.addTranslations('en', 'files', EN);
-i18n.addTranslations('ru', 'files', RU);
+applyTranslations();
 
 export * from './constants/routes';
 export * from './utils/paths';

package/src/services/requests.ts

@@ -1,6 +1,6 @@
-import { request, ResponseBody } from '@tager/admin-services';
+import { request, type ResponseBody } from '@tager/admin-services';
 
-import { FileModel } from '../typings/model';
+import { type FileModel } from '../typings/model';
 
 export function getFilesList(params?: {
   query?: string;

package/src/typings/model.ts

@@ -1,4 +1,4 @@
-import { SingleFileInputValueType } from '@tager/admin-ui';
+import { type SingleFileInputValueType } from '@tager/admin-ui';
 
 export interface FileModel {
   id: number;

package/src/views/FilesForm/FilesForm.helpers.ts

@@ -1,4 +1,4 @@
-import { FilesCreatePayload, FormValues } from '../../typings/model';
+import { type FilesCreatePayload, type FormValues } from '../../typings/model';
 
 export function convertFilesFormValuesToCreationPayload(
   values: FormValues

package/src/views/FilesForm/FilesForm.vue

@@ -1,50 +1,58 @@
 <template>
-  <page :title="$t('files:fileCreation')">
+  <Page :title="$i18n.t('files:fileCreation')">
     <form novalidate @submit.prevent>
-      <template>
-        <form-field-file-input
-          v-model="values.file"
-          :error="errors.file"
-          :label="$t('files:file')"
-          name="file"
-        />
-      </template>
+      <FormFieldFileInput
+        v-model:value="values.file"
+        :error="errors.file"
+        :label="$i18n.t('files:file')"
+        name="file"
+      />
     </form>
 
-    <template v-slot:footer>
+    <template #footer>
       <FormFooter
         :back-href="getFilesListUrl()"
-        :on-submit="submitForm"
         :is-submitting="isSubmitting"
         :is-creation="true"
         submit-label="Добавить"
+        @submit="submitForm"
       />
     </template>
-  </page>
+  </Page>
 </template>
 
 <script lang="ts">
-import { defineComponent } from '@vue/composition-api';
-import { ref } from '@vue/composition-api';
+import { defineComponent, ref } from 'vue';
+import { useRouter } from 'vue-router';
 
-import { convertRequestErrorToMap } from '@tager/admin-services';
 import {
-  TagerFormSubmitEvent,
+  type TagerFormSubmitEvent,
   FormFooter,
-  useTranslation,
+  FormField,
+  FormFieldFileInput,
 } from '@tager/admin-ui';
+import {
+  convertRequestErrorToMap,
+  navigateBack,
+  useI18n,
+  useResource,
+  useToast,
+} from '@tager/admin-services';
+import { Page } from '@tager/admin-layout';
 
 import { addFile } from '../../services/requests';
 import { getFilesListUrl } from '../../utils/paths';
-import { FormValues } from '../../typings/model';
+import { type FormValues } from '../../typings/model';
 
 import { convertFilesFormValuesToCreationPayload } from './FilesForm.helpers';
 
 export default defineComponent({
   name: 'FilesForm',
-  components: { FormFooter },
-  setup(props, context) {
-    const { t } = useTranslation(context);
+  components: { Page, FormFieldFileInput, FormFooter },
+  setup() {
+    const { t } = useI18n();
+    const toast = useToast();
+    const router = useRouter();
 
     /** Form state */
 
@@ -69,10 +77,10 @@ export default defineComponent({
             event.type === 'create_exit' ||
             event.type === 'save_exit'
           ) {
-            context.root.$router.push(getFilesListUrl());
+            navigateBack(router, getFilesListUrl());
           }
 
-          context.root.$toast({
+          toast.show({
             variant: 'success',
             title: t('files:success'),
             body: t('files:createdSuccessMessage'),
@@ -81,7 +89,7 @@ export default defineComponent({
         .catch((error) => {
           console.error(error);
           errors.value = convertRequestErrorToMap(error);
-          context.root.$toast({
+          toast.show({
             variant: 'danger',
             title: t('files:error'),
             body: t('files:createdErrorMessage'),
@@ -102,5 +110,3 @@ export default defineComponent({
   },
 });
 </script>
-
-<style lang="scss" scoped></style>

package/src/views/FilesList/FilesList.vue

@@ -1,61 +1,65 @@
 <template>
-  <page
-      :title="$t('files:filesList')"
-      :header-buttons="[
+  <Page
+    :title="$i18n.t('files:filesList')"
+    :header-buttons="[
       {
-        text: $t('files:createFile'),
+        text: $i18n.t('files:createFile'),
         href: getFilesFormUrl({ fileId: 'create' }),
       },
     ]"
   >
-    <data-table
-        :column-defs="columnDefs"
-        :row-data="rowData"
-        :loading="isRowDataLoading"
-        :error-message="errorMessage"
-        :search-query="searchQuery"
-        :pagination="{
+    <DataTable
+      :column-defs="columnDefs"
+      :row-data="rowData"
+      :loading="isRowDataLoading"
+      :error-message="errorMessage"
+      :search-query="searchQuery"
+      :pagination="{
         pageSize,
         pageCount,
         pageNumber,
         disabled: isRowDataLoading,
       }"
-        @change="handleChange"
+      @change="handleChange"
     >
-      <template v-slot:cell(delete)="{ row }">
-        <base-button
-            variant="icon"
-            :title="$t('files:delete')"
-            :disabled="isDeleting(row.id)"
-            @click="handleResourceDelete(row.id)"
+      <template #cell(delete)="{ row }">
+        <BaseButton
+          variant="icon"
+          :title="$i18n.t('files:delete')"
+          :disabled="isDeleting(row.id)"
+          @click="handleResourceDelete(row.id)"
         >
-          <svg-icon name="delete"/>
-        </base-button>
+          <DeleteIcon />
+        </BaseButton>
       </template>
-    </data-table>
-  </page>
+    </DataTable>
+  </Page>
 </template>
 
 <script lang="ts">
-import {defineComponent, onMounted} from '@vue/composition-api';
+import { defineComponent, onMounted } from 'vue';
 import filesize from 'filesize';
 
 import {
-  ColumnDefinition, cutUrlOrigin,
+  type ColumnDefinition,
   useDataTable,
-  useTranslation,
+  DataTable,
+  BaseButton,
+  DeleteIcon,
+  cutUrlOrigin,
 } from '@tager/admin-ui';
-import {useResourceDelete} from '@tager/admin-services';
+import { useI18n, useResourceDelete } from '@tager/admin-services';
+import { Page } from '@tager/admin-layout';
 
-import {deleteFile, getFilesList} from '../../services/requests';
-import {FileModel} from '../../typings/model';
-import {getFilesFormUrl} from '../../utils/paths';
+import { deleteFile, getFilesList } from '../../services/requests';
+import { type FileModel } from '../../typings/model';
+import { getFilesFormUrl } from '../../utils/paths';
 
 export default defineComponent({
   name: 'FilesList',
-  components: {},
-  setup(props, context) {
-    const {t} = useTranslation(context);
+  components: { DataTable, BaseButton, DeleteIcon, Page },
+  setup() {
+    const { t } = useI18n();
 
     const {
       fetchEntityList: fetchFilesList,
@@ -69,13 +73,12 @@ export default defineComponent({
       pageNumber,
     } = useDataTable<FileModel>({
       fetchEntityList: (params) =>
-          getFilesList({
-            query: params.searchQuery,
-            pageNumber: params.pageNumber,
-            pageSize: params.pageSize,
-          }),
+        getFilesList({
+          query: params.searchQuery,
+          pageNumber: params.pageNumber,
+          pageSize: params.pageSize,
+        }),
       initialValue: [],
-      context,
       resourceName: 'Files list',
       pageSize: 100,
     });
@@ -84,11 +87,10 @@ export default defineComponent({
       fetchFilesList();
     });
 
-    const {handleResourceDelete, isDeleting} = useResourceDelete({
+    const { handleResourceDelete, isDeleting } = useResourceDelete({
       deleteResource: deleteFile,
       resourceName: 'File',
       onSuccess: fetchFilesList,
-      context,
     });
 
     const columnDefs: Array<ColumnDefinition<FileModel>> = [
@@ -96,8 +98,8 @@ export default defineComponent({
         id: 1,
         name: 'ID',
         field: 'id',
-        style: {width: '50px', textAlign: 'center'},
-        headStyle: {width: '50px', textAlign: 'center'},
+        style: { width: '50px', textAlign: 'center' },
+        headStyle: { width: '50px', textAlign: 'center' },
       },
       {
         id: 2,
@@ -113,26 +115,26 @@ export default defineComponent({
         id: 4,
         name: t('files:fileSize'),
         field: 'size',
-        format: ({row}) => filesize(row.size),
-        style: {whiteSpace: 'nowrap'},
-        headStyle: {whiteSpace: 'nowrap'},
+        format: ({ row }) => filesize(row.size),
+        style: { whiteSpace: 'nowrap' },
+        headStyle: { whiteSpace: 'nowrap' },
       },
       {
         id: 5,
         name: 'URL',
         type: 'link',
         field: 'url',
-        format: ({row}) => ({
+        format: ({ row }) => ({
           url: row.url,
-          text: cutUrlOrigin(row.url)
+          text: cutUrlOrigin(row.url),
         }),
       },
       {
         id: 6,
         name: t('files:delete'),
         field: 'delete',
-        style: {textAlign: 'center'},
-        headStyle: {textAlign: 'center'},
+        style: { textAlign: 'center' },
+        headStyle: { textAlign: 'center' },
       },
     ];
 

package/README.md

@@ -1 +0,0 @@
-# tager-admin-files

package/dist/dev.d.ts

@@ -1 +0,0 @@
-import '@tager/admin-ui/dist/admin-ui.css';