@tager/admin-files 0.0.6 → 0.0.7

package/dist/index.esm.js

@@ -1,6 +1,6 @@
-import { request, isAbsoluteUrl, useResourceDelete, convertRequestErrorToMap, i18n } from '@tager/admin-services';
+import { request, useResourceDelete, convertRequestErrorToMap, i18n } from '@tager/admin-services';
 import { defineComponent, onMounted, ref } from '@vue/composition-api';
-import { useCopyToClipboard, useTranslation, useDataTable, FormFooter } from '@tager/admin-ui';
+import { useTranslation, useDataTable, cutUrlOrigin, FormFooter } from '@tager/admin-ui';
 import { compile } from 'path-to-regexp';
 
 const EN = {
@@ -236,32 +236,88 @@ function getFilesFormUrl(params) {
     return compile(FILES_ROUTE_PATHS.FILES_FORM)(params);
 }
 
-/**
- * Example:
- * input: "https://ozitag.com/search?query=some_text"
- * output: "/search?query=some_text"
- */
-function cutUrlOrigin(url) {
-    if (!isAbsoluteUrl(url))
-        return url;
-    const urlObject = new URL(url);
-    return urlObject.href.slice(urlObject.origin.length);
-}
-
-var script$2 = defineComponent({
-    name: 'UrlCell',
-    props: {
-        url: {
-            type: String,
-            default: '',
-        },
-    },
-    setup() {
-        const [isCopied, handleCopy] = useCopyToClipboard(500);
+var script$1 = defineComponent({
+    name: 'FilesList',
+    components: {},
+    setup(props, context) {
+        const { t } = useTranslation(context);
+        const { fetchEntityList: fetchFilesList, isLoading: isFilesListLoading, rowData: filesList, errorMessage, searchQuery, handleChange, pageSize, pageCount, pageNumber, } = useDataTable({
+            fetchEntityList: (params) => getFilesList({
+                query: params.searchQuery,
+                pageNumber: params.pageNumber,
+                pageSize: params.pageSize,
+            }),
+            initialValue: [],
+            context,
+            resourceName: 'Files list',
+            pageSize: 100,
+        });
+        onMounted(() => {
+            fetchFilesList();
+        });
+        const { handleResourceDelete, isDeleting } = useResourceDelete({
+            deleteResource: deleteFile,
+            resourceName: 'File',
+            onSuccess: fetchFilesList,
+            context,
+        });
+        const columnDefs = [
+            {
+                id: 1,
+                name: 'ID',
+                field: 'id',
+                style: { width: '50px', textAlign: 'center' },
+                headStyle: { width: '50px', textAlign: 'center' },
+            },
+            {
+                id: 2,
+                name: t('files:fileName'),
+                field: 'name',
+            },
+            {
+                id: 3,
+                name: t('files:fileType'),
+                field: 'type',
+            },
+            {
+                id: 4,
+                name: t('files:fileSize'),
+                field: 'size',
+                format: ({ row }) => filesize(row.size),
+                style: { whiteSpace: 'nowrap' },
+                headStyle: { whiteSpace: 'nowrap' },
+            },
+            {
+                id: 5,
+                name: 'URL',
+                type: 'link',
+                field: 'url',
+                format: ({ row }) => ({
+                    url: row.url,
+                    text: cutUrlOrigin(row.url)
+                }),
+            },
+            {
+                id: 6,
+                name: t('files:delete'),
+                field: 'delete',
+                style: { textAlign: 'center' },
+                headStyle: { textAlign: 'center' },
+            },
+        ];
         return {
-            isCopied,
-            handleCopy,
-            cutUrlOrigin,
+            columnDefs,
+            getFilesFormUrl,
+            rowData: filesList,
+            isRowDataLoading: isFilesListLoading,
+            errorMessage: errorMessage,
+            searchQuery,
+            handleChange,
+            pageSize,
+            pageCount,
+            pageNumber,
+            handleResourceDelete,
+            isDeleting,
         };
     },
 });
@@ -341,222 +397,6 @@ function normalizeComponent(template, style, script, scopeId, isFunctionalTempla
     return script;
 }
 
-const isOldIE = typeof navigator !== 'undefined' &&
-    /msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());
-function createInjector(context) {
-    return (id, style) => addStyle(id, style);
-}
-let HEAD;
-const styles = {};
-function addStyle(id, css) {
-    const group = isOldIE ? css.media || 'default' : id;
-    const style = styles[group] || (styles[group] = { ids: new Set(), styles: [] });
-    if (!style.ids.has(id)) {
-        style.ids.add(id);
-        let code = css.source;
-        if (css.map) {
-            // https://developer.chrome.com/devtools/docs/javascript-debugging
-            // this makes source maps inside style tags work properly in Chrome
-            code += '\n/*# sourceURL=' + css.map.sources[0] + ' */';
-            // http://stackoverflow.com/a/26603875
-            code +=
-                '\n/*# sourceMappingURL=data:application/json;base64,' +
-                    btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) +
-                    ' */';
-        }
-        if (!style.element) {
-            style.element = document.createElement('style');
-            style.element.type = 'text/css';
-            if (css.media)
-                style.element.setAttribute('media', css.media);
-            if (HEAD === undefined) {
-                HEAD = document.head || document.getElementsByTagName('head')[0];
-            }
-            HEAD.appendChild(style.element);
-        }
-        if ('styleSheet' in style.element) {
-            style.styles.push(code);
-            style.element.styleSheet.cssText = style.styles
-                .filter(Boolean)
-                .join('\n');
-        }
-        else {
-            const index = style.ids.size - 1;
-            const textNode = document.createTextNode(code);
-            const nodes = style.element.childNodes;
-            if (nodes[index])
-                style.element.removeChild(nodes[index]);
-            if (nodes.length)
-                style.element.insertBefore(textNode, nodes[index]);
-            else
-                style.element.appendChild(textNode);
-        }
-    }
-}
-
-/* script */
-const __vue_script__$2 = script$2;
-
-/* template */
-var __vue_render__$2 = function () {
-  var _vm = this;
-  var _h = _vm.$createElement;
-  var _c = _vm._self._c || _h;
-  return _c(
-    "div",
-    { staticClass: "url-cell" },
-    [
-      _c(
-        "a",
-        { staticClass: "url-text", attrs: { href: _vm.url, target: "_blank" } },
-        [_vm._v(_vm._s(_vm.cutUrlOrigin(_vm.url)))]
-      ),
-      _vm._v(" "),
-      _c(
-        "base-button",
-        {
-          staticClass: "copy-button",
-          attrs: { variant: "icon" },
-          on: {
-            click: function ($event) {
-              return _vm.handleCopy(_vm.url)
-            },
-          },
-        },
-        [
-          !_vm.isCopied
-            ? _c("svg-icon", {
-                staticClass: "icon-size",
-                attrs: { name: "contentCopy" },
-              })
-            : _c("svg-icon", {
-                staticClass: "icon-size icon-color-green",
-                attrs: { name: "done" },
-              }),
-        ],
-        1
-      ),
-    ],
-    1
-  )
-};
-var __vue_staticRenderFns__$2 = [];
-__vue_render__$2._withStripped = true;
-
-  /* style */
-  const __vue_inject_styles__$2 = function (inject) {
-    if (!inject) return
-    inject("data-v-1551a39a_0", { source: ".url-cell[data-v-1551a39a] {\n  display: flex;\n  align-items: center;\n}\n.url-cell .url-text[data-v-1551a39a] {\n  color: #007bff;\n}\n.url-cell .url-text[data-v-1551a39a]:hover {\n  color: #0056b3;\n  text-decoration: underline;\n}\n.url-cell .copy-button[data-v-1551a39a] {\n  margin-left: 5px;\n}\n.url-cell .copy-button .icon-size[data-v-1551a39a] {\n  width: 14px;\n  height: 14px;\n}\n.url-cell .copy-button .icon-color-green[data-v-1551a39a] {\n  color: #22863a;\n}\n\n/*# sourceMappingURL=UrlCell.vue.map */", map: {"version":3,"sources":["/home/runner/work/tager-admin-files/tager-admin-files/src/views/FilesList/components/UrlCell/UrlCell.vue","UrlCell.vue"],"names":[],"mappings":"AAyCA;EACA,aAAA;EACA,mBAAA;ACxCA;AD0CA;EACA,cAAA;ACxCA;AD0CA;EACA,cAAA;EACA,0BAAA;ACxCA;AD4CA;EACA,gBAAA;AC1CA;AD4CA;EACA,WAAA;EACA,YAAA;AC1CA;AD6CA;EACA,cAAA;AC3CA;;AAEA,sCAAsC","file":"UrlCell.vue","sourcesContent":["<template>\n  <div class=\"url-cell\">\n    <a :href=\"url\" target=\"_blank\" class=\"url-text\">{{ cutUrlOrigin(url) }}</a>\n    <base-button variant=\"icon\" class=\"copy-button\" @click=\"handleCopy(url)\">\n      <svg-icon v-if=\"!isCopied\" name=\"contentCopy\" class=\"icon-size\" />\n      <svg-icon v-else name=\"done\" class=\"icon-size icon-color-green\" />\n    </base-button>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from '@vue/composition-api';\n\nimport { cutUrlOrigin } from '@tager/admin-ui/src/utils/common';\nimport { useCopyToClipboard } from '@tager/admin-ui';\n\ninterface Props {\n  url: string;\n}\n\nexport default defineComponent<Props>({\n  name: 'UrlCell',\n  props: {\n    url: {\n      type: String,\n      default: '',\n    },\n  },\n  setup() {\n    const [isCopied, handleCopy] = useCopyToClipboard(500);\n\n    return {\n      isCopied,\n      handleCopy,\n      cutUrlOrigin,\n    };\n  },\n});\n</script>\n\n<style lang=\"scss\" scoped>\n.url-cell {\n  display: flex;\n  align-items: center;\n\n  .url-text {\n    color: #007bff;\n\n    &:hover {\n      color: #0056b3;\n      text-decoration: underline;\n    }\n  }\n\n  .copy-button {\n    margin-left: 5px;\n\n    .icon-size {\n      width: 14px;\n      height: 14px;\n    }\n\n    .icon-color-green {\n      color: #22863a;\n    }\n  }\n}\n</style>\n",".url-cell {\n  display: flex;\n  align-items: center;\n}\n.url-cell .url-text {\n  color: #007bff;\n}\n.url-cell .url-text:hover {\n  color: #0056b3;\n  text-decoration: underline;\n}\n.url-cell .copy-button {\n  margin-left: 5px;\n}\n.url-cell .copy-button .icon-size {\n  width: 14px;\n  height: 14px;\n}\n.url-cell .copy-button .icon-color-green {\n  color: #22863a;\n}\n\n/*# sourceMappingURL=UrlCell.vue.map */"]}, media: undefined });
-
-  };
-  /* scoped */
-  const __vue_scope_id__$2 = "data-v-1551a39a";
-  /* module identifier */
-  const __vue_module_identifier__$2 = undefined;
-  /* functional template */
-  const __vue_is_functional_template__$2 = false;
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__$2 = /*#__PURE__*/normalizeComponent(
-    { render: __vue_render__$2, staticRenderFns: __vue_staticRenderFns__$2 },
-    __vue_inject_styles__$2,
-    __vue_script__$2,
-    __vue_scope_id__$2,
-    __vue_is_functional_template__$2,
-    __vue_module_identifier__$2,
-    false,
-    createInjector,
-    undefined,
-    undefined
-  );
-
-var script$1 = defineComponent({
-    name: 'FilesList',
-    components: {
-        UrlCell: __vue_component__$2,
-    },
-    setup(props, context) {
-        const { t } = useTranslation(context);
-        const { fetchEntityList: fetchFilesList, isLoading: isFilesListLoading, rowData: filesList, errorMessage, searchQuery, handleChange, pageSize, pageCount, pageNumber, } = useDataTable({
-            fetchEntityList: (params) => getFilesList({
-                query: params.searchQuery,
-                pageNumber: params.pageNumber,
-                pageSize: params.pageSize,
-            }),
-            initialValue: [],
-            context,
-            resourceName: 'Files list',
-            pageSize: 100,
-        });
-        onMounted(() => {
-            fetchFilesList();
-        });
-        const { handleResourceDelete, isDeleting } = useResourceDelete({
-            deleteResource: deleteFile,
-            resourceName: 'File',
-            onSuccess: fetchFilesList,
-            context,
-        });
-        const columnDefs = [
-            {
-                id: 1,
-                name: 'ID',
-                field: 'id',
-                style: { width: '50px', textAlign: 'center' },
-                headStyle: { width: '50px', textAlign: 'center' },
-            },
-            {
-                id: 2,
-                name: t('files:fileName'),
-                field: 'name',
-            },
-            {
-                id: 3,
-                name: t('files:fileType'),
-                field: 'type',
-            },
-            {
-                id: 4,
-                name: t('files:fileSize'),
-                field: 'size',
-                format: ({ row }) => filesize(row.size),
-                style: { whiteSpace: 'nowrap' },
-                headStyle: { whiteSpace: 'nowrap' },
-            },
-            {
-                id: 5,
-                name: 'URL',
-                field: 'url'
-            },
-            {
-                id: 6,
-                name: t('files:delete'),
-                field: 'delete',
-                style: { textAlign: 'center' },
-                headStyle: { textAlign: 'center' },
-            },
-        ];
-        return {
-            columnDefs,
-            getFilesFormUrl,
-            rowData: filesList,
-            isRowDataLoading: isFilesListLoading,
-            errorMessage: errorMessage,
-            searchQuery,
-            handleChange,
-            pageSize,
-            pageCount,
-            pageNumber,
-            handleResourceDelete,
-            isDeleting,
-        };
-    },
-});
-
 /* script */
 const __vue_script__$1 = script$1;
 
@@ -595,13 +435,6 @@ var __vue_render__$1 = function () {
         },
         on: { change: _vm.handleChange },
         scopedSlots: _vm._u([
-          {
-            key: "cell(url)",
-            fn: function (ref) {
-              var row = ref.row;
-              return [_c("UrlCell", { attrs: { url: row.url } })]
-            },
-          },
           {
             key: "cell(delete)",
             fn: function (ref) {
@@ -722,6 +555,59 @@ var script = defineComponent({
     },
 });
 
+const isOldIE = typeof navigator !== 'undefined' &&
+    /msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());
+function createInjector(context) {
+    return (id, style) => addStyle(id, style);
+}
+let HEAD;
+const styles = {};
+function addStyle(id, css) {
+    const group = isOldIE ? css.media || 'default' : id;
+    const style = styles[group] || (styles[group] = { ids: new Set(), styles: [] });
+    if (!style.ids.has(id)) {
+        style.ids.add(id);
+        let code = css.source;
+        if (css.map) {
+            // https://developer.chrome.com/devtools/docs/javascript-debugging
+            // this makes source maps inside style tags work properly in Chrome
+            code += '\n/*# sourceURL=' + css.map.sources[0] + ' */';
+            // http://stackoverflow.com/a/26603875
+            code +=
+                '\n/*# sourceMappingURL=data:application/json;base64,' +
+                    btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) +
+                    ' */';
+        }
+        if (!style.element) {
+            style.element = document.createElement('style');
+            style.element.type = 'text/css';
+            if (css.media)
+                style.element.setAttribute('media', css.media);
+            if (HEAD === undefined) {
+                HEAD = document.head || document.getElementsByTagName('head')[0];
+            }
+            HEAD.appendChild(style.element);
+        }
+        if ('styleSheet' in style.element) {
+            style.styles.push(code);
+            style.element.styleSheet.cssText = style.styles
+                .filter(Boolean)
+                .join('\n');
+        }
+        else {
+            const index = style.ids.size - 1;
+            const textNode = document.createTextNode(code);
+            const nodes = style.element.childNodes;
+            if (nodes[index])
+                style.element.removeChild(nodes[index]);
+            if (nodes.length)
+                style.element.insertBefore(textNode, nodes[index]);
+            else
+                style.element.appendChild(textNode);
+        }
+    }
+}
+
 /* script */
 const __vue_script__ = script;
 

package/dist/index.umd.js

@@ -237,32 +237,88 @@
       return pathToRegexp.compile(FILES_ROUTE_PATHS.FILES_FORM)(params);
   }
 
-  /**
-   * Example:
-   * input: "https://ozitag.com/search?query=some_text"
-   * output: "/search?query=some_text"
-   */
-  function cutUrlOrigin(url) {
-      if (!adminServices.isAbsoluteUrl(url))
-          return url;
-      const urlObject = new URL(url);
-      return urlObject.href.slice(urlObject.origin.length);
-  }
-
-  var script$2 = compositionApi.defineComponent({
-      name: 'UrlCell',
-      props: {
-          url: {
-              type: String,
-              default: '',
-          },
-      },
-      setup() {
-          const [isCopied, handleCopy] = adminUi.useCopyToClipboard(500);
+  var script$1 = compositionApi.defineComponent({
+      name: 'FilesList',
+      components: {},
+      setup(props, context) {
+          const { t } = adminUi.useTranslation(context);
+          const { fetchEntityList: fetchFilesList, isLoading: isFilesListLoading, rowData: filesList, errorMessage, searchQuery, handleChange, pageSize, pageCount, pageNumber, } = adminUi.useDataTable({
+              fetchEntityList: (params) => getFilesList({
+                  query: params.searchQuery,
+                  pageNumber: params.pageNumber,
+                  pageSize: params.pageSize,
+              }),
+              initialValue: [],
+              context,
+              resourceName: 'Files list',
+              pageSize: 100,
+          });
+          compositionApi.onMounted(() => {
+              fetchFilesList();
+          });
+          const { handleResourceDelete, isDeleting } = adminServices.useResourceDelete({
+              deleteResource: deleteFile,
+              resourceName: 'File',
+              onSuccess: fetchFilesList,
+              context,
+          });
+          const columnDefs = [
+              {
+                  id: 1,
+                  name: 'ID',
+                  field: 'id',
+                  style: { width: '50px', textAlign: 'center' },
+                  headStyle: { width: '50px', textAlign: 'center' },
+              },
+              {
+                  id: 2,
+                  name: t('files:fileName'),
+                  field: 'name',
+              },
+              {
+                  id: 3,
+                  name: t('files:fileType'),
+                  field: 'type',
+              },
+              {
+                  id: 4,
+                  name: t('files:fileSize'),
+                  field: 'size',
+                  format: ({ row }) => filesize(row.size),
+                  style: { whiteSpace: 'nowrap' },
+                  headStyle: { whiteSpace: 'nowrap' },
+              },
+              {
+                  id: 5,
+                  name: 'URL',
+                  type: 'link',
+                  field: 'url',
+                  format: ({ row }) => ({
+                      url: row.url,
+                      text: adminUi.cutUrlOrigin(row.url)
+                  }),
+              },
+              {
+                  id: 6,
+                  name: t('files:delete'),
+                  field: 'delete',
+                  style: { textAlign: 'center' },
+                  headStyle: { textAlign: 'center' },
+              },
+          ];
           return {
-              isCopied,
-              handleCopy,
-              cutUrlOrigin,
+              columnDefs,
+              getFilesFormUrl,
+              rowData: filesList,
+              isRowDataLoading: isFilesListLoading,
+              errorMessage: errorMessage,
+              searchQuery,
+              handleChange,
+              pageSize,
+              pageCount,
+              pageNumber,
+              handleResourceDelete,
+              isDeleting,
           };
       },
   });
@@ -342,222 +398,6 @@
       return script;
   }
 
-  const isOldIE = typeof navigator !== 'undefined' &&
-      /msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());
-  function createInjector(context) {
-      return (id, style) => addStyle(id, style);
-  }
-  let HEAD;
-  const styles = {};
-  function addStyle(id, css) {
-      const group = isOldIE ? css.media || 'default' : id;
-      const style = styles[group] || (styles[group] = { ids: new Set(), styles: [] });
-      if (!style.ids.has(id)) {
-          style.ids.add(id);
-          let code = css.source;
-          if (css.map) {
-              // https://developer.chrome.com/devtools/docs/javascript-debugging
-              // this makes source maps inside style tags work properly in Chrome
-              code += '\n/*# sourceURL=' + css.map.sources[0] + ' */';
-              // http://stackoverflow.com/a/26603875
-              code +=
-                  '\n/*# sourceMappingURL=data:application/json;base64,' +
-                      btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) +
-                      ' */';
-          }
-          if (!style.element) {
-              style.element = document.createElement('style');
-              style.element.type = 'text/css';
-              if (css.media)
-                  style.element.setAttribute('media', css.media);
-              if (HEAD === undefined) {
-                  HEAD = document.head || document.getElementsByTagName('head')[0];
-              }
-              HEAD.appendChild(style.element);
-          }
-          if ('styleSheet' in style.element) {
-              style.styles.push(code);
-              style.element.styleSheet.cssText = style.styles
-                  .filter(Boolean)
-                  .join('\n');
-          }
-          else {
-              const index = style.ids.size - 1;
-              const textNode = document.createTextNode(code);
-              const nodes = style.element.childNodes;
-              if (nodes[index])
-                  style.element.removeChild(nodes[index]);
-              if (nodes.length)
-                  style.element.insertBefore(textNode, nodes[index]);
-              else
-                  style.element.appendChild(textNode);
-          }
-      }
-  }
-
-  /* script */
-  const __vue_script__$2 = script$2;
-
-  /* template */
-  var __vue_render__$2 = function () {
-    var _vm = this;
-    var _h = _vm.$createElement;
-    var _c = _vm._self._c || _h;
-    return _c(
-      "div",
-      { staticClass: "url-cell" },
-      [
-        _c(
-          "a",
-          { staticClass: "url-text", attrs: { href: _vm.url, target: "_blank" } },
-          [_vm._v(_vm._s(_vm.cutUrlOrigin(_vm.url)))]
-        ),
-        _vm._v(" "),
-        _c(
-          "base-button",
-          {
-            staticClass: "copy-button",
-            attrs: { variant: "icon" },
-            on: {
-              click: function ($event) {
-                return _vm.handleCopy(_vm.url)
-              },
-            },
-          },
-          [
-            !_vm.isCopied
-              ? _c("svg-icon", {
-                  staticClass: "icon-size",
-                  attrs: { name: "contentCopy" },
-                })
-              : _c("svg-icon", {
-                  staticClass: "icon-size icon-color-green",
-                  attrs: { name: "done" },
-                }),
-          ],
-          1
-        ),
-      ],
-      1
-    )
-  };
-  var __vue_staticRenderFns__$2 = [];
-  __vue_render__$2._withStripped = true;
-
-    /* style */
-    const __vue_inject_styles__$2 = function (inject) {
-      if (!inject) return
-      inject("data-v-1551a39a_0", { source: ".url-cell[data-v-1551a39a] {\n  display: flex;\n  align-items: center;\n}\n.url-cell .url-text[data-v-1551a39a] {\n  color: #007bff;\n}\n.url-cell .url-text[data-v-1551a39a]:hover {\n  color: #0056b3;\n  text-decoration: underline;\n}\n.url-cell .copy-button[data-v-1551a39a] {\n  margin-left: 5px;\n}\n.url-cell .copy-button .icon-size[data-v-1551a39a] {\n  width: 14px;\n  height: 14px;\n}\n.url-cell .copy-button .icon-color-green[data-v-1551a39a] {\n  color: #22863a;\n}\n\n/*# sourceMappingURL=UrlCell.vue.map */", map: {"version":3,"sources":["/home/runner/work/tager-admin-files/tager-admin-files/src/views/FilesList/components/UrlCell/UrlCell.vue","UrlCell.vue"],"names":[],"mappings":"AAyCA;EACA,aAAA;EACA,mBAAA;ACxCA;AD0CA;EACA,cAAA;ACxCA;AD0CA;EACA,cAAA;EACA,0BAAA;ACxCA;AD4CA;EACA,gBAAA;AC1CA;AD4CA;EACA,WAAA;EACA,YAAA;AC1CA;AD6CA;EACA,cAAA;AC3CA;;AAEA,sCAAsC","file":"UrlCell.vue","sourcesContent":["<template>\n  <div class=\"url-cell\">\n    <a :href=\"url\" target=\"_blank\" class=\"url-text\">{{ cutUrlOrigin(url) }}</a>\n    <base-button variant=\"icon\" class=\"copy-button\" @click=\"handleCopy(url)\">\n      <svg-icon v-if=\"!isCopied\" name=\"contentCopy\" class=\"icon-size\" />\n      <svg-icon v-else name=\"done\" class=\"icon-size icon-color-green\" />\n    </base-button>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from '@vue/composition-api';\n\nimport { cutUrlOrigin } from '@tager/admin-ui/src/utils/common';\nimport { useCopyToClipboard } from '@tager/admin-ui';\n\ninterface Props {\n  url: string;\n}\n\nexport default defineComponent<Props>({\n  name: 'UrlCell',\n  props: {\n    url: {\n      type: String,\n      default: '',\n    },\n  },\n  setup() {\n    const [isCopied, handleCopy] = useCopyToClipboard(500);\n\n    return {\n      isCopied,\n      handleCopy,\n      cutUrlOrigin,\n    };\n  },\n});\n</script>\n\n<style lang=\"scss\" scoped>\n.url-cell {\n  display: flex;\n  align-items: center;\n\n  .url-text {\n    color: #007bff;\n\n    &:hover {\n      color: #0056b3;\n      text-decoration: underline;\n    }\n  }\n\n  .copy-button {\n    margin-left: 5px;\n\n    .icon-size {\n      width: 14px;\n      height: 14px;\n    }\n\n    .icon-color-green {\n      color: #22863a;\n    }\n  }\n}\n</style>\n",".url-cell {\n  display: flex;\n  align-items: center;\n}\n.url-cell .url-text {\n  color: #007bff;\n}\n.url-cell .url-text:hover {\n  color: #0056b3;\n  text-decoration: underline;\n}\n.url-cell .copy-button {\n  margin-left: 5px;\n}\n.url-cell .copy-button .icon-size {\n  width: 14px;\n  height: 14px;\n}\n.url-cell .copy-button .icon-color-green {\n  color: #22863a;\n}\n\n/*# sourceMappingURL=UrlCell.vue.map */"]}, media: undefined });
-
-    };
-    /* scoped */
-    const __vue_scope_id__$2 = "data-v-1551a39a";
-    /* module identifier */
-    const __vue_module_identifier__$2 = undefined;
-    /* functional template */
-    const __vue_is_functional_template__$2 = false;
-    /* style inject SSR */
-    
-    /* style inject shadow dom */
-    
-
-    
-    const __vue_component__$2 = /*#__PURE__*/normalizeComponent(
-      { render: __vue_render__$2, staticRenderFns: __vue_staticRenderFns__$2 },
-      __vue_inject_styles__$2,
-      __vue_script__$2,
-      __vue_scope_id__$2,
-      __vue_is_functional_template__$2,
-      __vue_module_identifier__$2,
-      false,
-      createInjector,
-      undefined,
-      undefined
-    );
-
-  var script$1 = compositionApi.defineComponent({
-      name: 'FilesList',
-      components: {
-          UrlCell: __vue_component__$2,
-      },
-      setup(props, context) {
-          const { t } = adminUi.useTranslation(context);
-          const { fetchEntityList: fetchFilesList, isLoading: isFilesListLoading, rowData: filesList, errorMessage, searchQuery, handleChange, pageSize, pageCount, pageNumber, } = adminUi.useDataTable({
-              fetchEntityList: (params) => getFilesList({
-                  query: params.searchQuery,
-                  pageNumber: params.pageNumber,
-                  pageSize: params.pageSize,
-              }),
-              initialValue: [],
-              context,
-              resourceName: 'Files list',
-              pageSize: 100,
-          });
-          compositionApi.onMounted(() => {
-              fetchFilesList();
-          });
-          const { handleResourceDelete, isDeleting } = adminServices.useResourceDelete({
-              deleteResource: deleteFile,
-              resourceName: 'File',
-              onSuccess: fetchFilesList,
-              context,
-          });
-          const columnDefs = [
-              {
-                  id: 1,
-                  name: 'ID',
-                  field: 'id',
-                  style: { width: '50px', textAlign: 'center' },
-                  headStyle: { width: '50px', textAlign: 'center' },
-              },
-              {
-                  id: 2,
-                  name: t('files:fileName'),
-                  field: 'name',
-              },
-              {
-                  id: 3,
-                  name: t('files:fileType'),
-                  field: 'type',
-              },
-              {
-                  id: 4,
-                  name: t('files:fileSize'),
-                  field: 'size',
-                  format: ({ row }) => filesize(row.size),
-                  style: { whiteSpace: 'nowrap' },
-                  headStyle: { whiteSpace: 'nowrap' },
-              },
-              {
-                  id: 5,
-                  name: 'URL',
-                  field: 'url'
-              },
-              {
-                  id: 6,
-                  name: t('files:delete'),
-                  field: 'delete',
-                  style: { textAlign: 'center' },
-                  headStyle: { textAlign: 'center' },
-              },
-          ];
-          return {
-              columnDefs,
-              getFilesFormUrl,
-              rowData: filesList,
-              isRowDataLoading: isFilesListLoading,
-              errorMessage: errorMessage,
-              searchQuery,
-              handleChange,
-              pageSize,
-              pageCount,
-              pageNumber,
-              handleResourceDelete,
-              isDeleting,
-          };
-      },
-  });
-
   /* script */
   const __vue_script__$1 = script$1;
 
@@ -596,13 +436,6 @@
           },
           on: { change: _vm.handleChange },
           scopedSlots: _vm._u([
-            {
-              key: "cell(url)",
-              fn: function (ref) {
-                var row = ref.row;
-                return [_c("UrlCell", { attrs: { url: row.url } })]
-              },
-            },
             {
               key: "cell(delete)",
               fn: function (ref) {
@@ -723,6 +556,59 @@
       },
   });
 
+  const isOldIE = typeof navigator !== 'undefined' &&
+      /msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());
+  function createInjector(context) {
+      return (id, style) => addStyle(id, style);
+  }
+  let HEAD;
+  const styles = {};
+  function addStyle(id, css) {
+      const group = isOldIE ? css.media || 'default' : id;
+      const style = styles[group] || (styles[group] = { ids: new Set(), styles: [] });
+      if (!style.ids.has(id)) {
+          style.ids.add(id);
+          let code = css.source;
+          if (css.map) {
+              // https://developer.chrome.com/devtools/docs/javascript-debugging
+              // this makes source maps inside style tags work properly in Chrome
+              code += '\n/*# sourceURL=' + css.map.sources[0] + ' */';
+              // http://stackoverflow.com/a/26603875
+              code +=
+                  '\n/*# sourceMappingURL=data:application/json;base64,' +
+                      btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) +
+                      ' */';
+          }
+          if (!style.element) {
+              style.element = document.createElement('style');
+              style.element.type = 'text/css';
+              if (css.media)
+                  style.element.setAttribute('media', css.media);
+              if (HEAD === undefined) {
+                  HEAD = document.head || document.getElementsByTagName('head')[0];
+              }
+              HEAD.appendChild(style.element);
+          }
+          if ('styleSheet' in style.element) {
+              style.styles.push(code);
+              style.element.styleSheet.cssText = style.styles
+                  .filter(Boolean)
+                  .join('\n');
+          }
+          else {
+              const index = style.ids.size - 1;
+              const textNode = document.createTextNode(code);
+              const nodes = style.element.childNodes;
+              if (nodes[index])
+                  style.element.removeChild(nodes[index]);
+              if (nodes.length)
+                  style.element.insertBefore(textNode, nodes[index]);
+              else
+                  style.element.appendChild(textNode);
+          }
+      }
+  }
+
   /* script */
   const __vue_script__ = script;
 

package/dist/views/FilesList/FilesList.vue.d.ts

@@ -1,8 +1,7 @@
 import { ColumnDefinition } from '@tager/admin-ui';
 import { FileModel } from '../../typings/model';
 import { getFilesFormUrl } from '../../utils/paths';
-import UrlCell from './components/UrlCell';
-declare const _default: import("vue").ComponentOptions<UrlCell, import("@vue/composition-api").ShallowUnwrapRef<{
+declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<{
     columnDefs: ColumnDefinition<FileModel>[];
     getFilesFormUrl: typeof getFilesFormUrl;
     rowData: import("@vue/composition-api").Ref<FileModel[]>;
@@ -17,7 +16,7 @@ declare const _default: import("vue").ComponentOptions<UrlCell, import("@vue/com
     isDeleting: (entityId: string | number) => boolean;
 }> & import("@vue/composition-api").Data, {}, {}, unknown, {
     [x: string]: any;
-}> & import("vue").VueConstructor<UrlCell> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
+}> & import("vue").VueConstructor<import("vue").default> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
     [x: string]: any;
 }, import("@vue/composition-api").ShallowUnwrapRef<{
     columnDefs: ColumnDefinition<FileModel>[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tager/admin-files",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "license": "MIT",
   "main": "dist/index.umd.js",
   "module": "dist/index.esm.js",

package/src/views/FilesList/FilesList.vue

@@ -22,10 +22,6 @@
       }"
         @change="handleChange"
     >
-      <template v-slot:cell(url)="{ row }">
-        <UrlCell :url="row.url"/>
-      </template>
-
       <template v-slot:cell(delete)="{ row }">
         <base-button
             variant="icon"
@@ -45,7 +41,7 @@ import {defineComponent, onMounted} from '@vue/composition-api';
 import filesize from 'filesize';
 
 import {
-  ColumnDefinition,
+  ColumnDefinition, cutUrlOrigin,
   useDataTable,
   useTranslation,
 } from '@tager/admin-ui';
@@ -55,13 +51,9 @@ import {deleteFile, getFilesList} from '../../services/requests';
 import {FileModel} from '../../typings/model';
 import {getFilesFormUrl} from '../../utils/paths';
 
-import UrlCell from './components/UrlCell';
-
 export default defineComponent({
   name: 'FilesList',
-  components: {
-    UrlCell,
-  },
+  components: {},
   setup(props, context) {
     const {t} = useTranslation(context);
 
@@ -128,7 +120,12 @@ export default defineComponent({
       {
         id: 5,
         name: 'URL',
-        field: 'url'
+        type: 'link',
+        field: 'url',
+        format: ({row}) => ({
+          url: row.url,
+          text: cutUrlOrigin(row.url)
+        }),
       },
       {
         id: 6,

package/dist/node_modules/@tager/admin-ui/src/utils/common.d.ts

@@ -1,59 +0,0 @@
-import VueRouter, { Route } from 'vue-router';
-/**
- * @param {Date} date
- * @returns {string}
- */
-export declare function formatDate(date: Date): string;
-/**
- * @param {Date} date
- * @returns {string}
- */
-export declare function formatDateTime(date: Date): string;
-/**
- * @param {Date} date
- * @returns {string}
- */
-export declare function formatTime(date: Date): string;
-/**
- * @param {any} value
- * @returns {string}
- */
-export declare function formatBoolean(value: unknown): "Yes" | "No";
-export declare function isValidSelectOption(option: unknown): boolean | null;
-export declare function createTabErrorFinder(errors: Record<string, string>): (fieldList: Array<string>) => boolean;
-export declare const FINAL_NUMBER_REGEXP: RegExp;
-export declare const INTERMEDIATE_NUMBER_REGEXP: RegExp;
-export declare const INTERMEDIATE_INTEGER_REGEXP: RegExp;
-export declare const DOT_REGEXP: RegExp;
-export declare const SPACE_REGEXP: RegExp;
-export declare function floatParser(currentValue: string, previousValue: string): string;
-export declare function integerParser(currentValue: string, previousValue: string): string;
-export declare function getWebsiteOrigin(): string;
-export declare function getSearchParams(): URLSearchParams;
-export declare function getSearchParamByKey(key: string): string | null;
-export declare function updateSearchParam(router: VueRouter, paramName: string, paramValue: string | number | null | undefined): Promise<Route>;
-/**
- * Example:
- * input: "https://ozitag.com/search?query=some_text"
- * output: "/search?query=some_text"
- */
-export declare function cutUrlOrigin(url: string): string;
-export declare function isScrollable(element: HTMLElement): boolean;
-export declare function getScrollableParent(element: HTMLElement | null): HTMLElement;
-export declare class LocalStorageService<T> {
-    defaultValue: T;
-    key: string;
-    constructor(key: string, defaultValue: T);
-    get(): T;
-    set(value: T): void;
-}
-declare type ParamValue = string | (string | null)[];
-declare type QueryType = {
-    [key in string]?: ParamValue;
-};
-export declare function getFilterParamAsString(query: QueryType, key: string): string | null;
-export declare function getFilterParamAsNumber(query: QueryType, key: string): number | null;
-export declare function getFilterParamAsStringArray(query: QueryType, key: string): Array<string>;
-export declare function getFilterParamAsNumberArray(query: QueryType, key: string): Array<number>;
-export declare function getFilterParams(filters: Record<string, string | number | Array<string> | Array<number>>): Record<string, string | Array<string>>;
-export {};

package/dist/views/FilesList/components/UrlCell/UrlCell.vue.d.ts

@@ -1,169 +0,0 @@
-declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<import("@vue/composition-api").Data> & import("@vue/composition-api").Data, {}, {}, import("@vue/composition-api").ComponentPropsOptions<import("@vue/composition-api").Data>, ({
-    [x: number]: string;
-} & {
-    length?: number | undefined;
-    toString?: string | undefined;
-    toLocaleString?: string | undefined;
-    pop?: string | undefined;
-    push?: number | undefined;
-    concat?: string[] | undefined;
-    join?: string | undefined;
-    reverse?: string[] | undefined;
-    shift?: string | undefined;
-    slice?: string[] | undefined;
-    sort?: string[] | undefined;
-    splice?: {
-        (start: number, deleteCount?: number | undefined): string[];
-        (start: number, deleteCount: number, ...items: string[]): string[];
-    } | undefined;
-    unshift?: number | undefined;
-    indexOf?: ((searchElement: string, fromIndex?: number | undefined) => number) | undefined;
-    lastIndexOf?: ((searchElement: string, fromIndex?: number | undefined) => number) | undefined;
-    every?: ((callbackfn: (value: string, index: number, array: string[]) => unknown, thisArg?: any) => boolean) | undefined;
-    some?: ((callbackfn: (value: string, index: number, array: string[]) => unknown, thisArg?: any) => boolean) | undefined;
-    forEach?: ((callbackfn: (value: string, index: number, array: string[]) => void, thisArg?: any) => void) | undefined;
-    map?: (<U>(callbackfn: (value: string, index: number, array: string[]) => U, thisArg?: any) => U[]) | undefined;
-    filter?: {
-        <S extends string>(callbackfn: (value: string, index: number, array: string[]) => value is S, thisArg?: any): S[];
-        (callbackfn: (value: string, index: number, array: string[]) => unknown, thisArg?: any): string[];
-    } | undefined;
-    reduce?: {
-        (callbackfn: (previousValue: string, currentValue: string, currentIndex: number, array: string[]) => string): string;
-        (callbackfn: (previousValue: string, currentValue: string, currentIndex: number, array: string[]) => string, initialValue: string): string;
-        <U_1>(callbackfn: (previousValue: U_1, currentValue: string, currentIndex: number, array: string[]) => U_1, initialValue: U_1): U_1;
-    } | undefined;
-    reduceRight?: {
-        (callbackfn: (previousValue: string, currentValue: string, currentIndex: number, array: string[]) => string): string;
-        (callbackfn: (previousValue: string, currentValue: string, currentIndex: number, array: string[]) => string, initialValue: string): string;
-        <U_2>(callbackfn: (previousValue: U_2, currentValue: string, currentIndex: number, array: string[]) => U_2, initialValue: U_2): U_2;
-    } | undefined;
-    find?: {
-        <S_1 extends string>(predicate: (this: void, value: string, index: number, obj: string[]) => value is S_1, thisArg?: any): S_1 | undefined;
-        (predicate: (value: string, index: number, obj: string[]) => unknown, thisArg?: any): string | undefined;
-    } | undefined;
-    findIndex?: ((predicate: (value: string, index: number, obj: string[]) => unknown, thisArg?: any) => number) | undefined;
-    fill?: ((value: string, start?: number | undefined, end?: number | undefined) => string[]) | undefined;
-    copyWithin?: ((target: number, start: number, end?: number | undefined) => string[]) | undefined;
-    entries?: IterableIterator<[number, string]> | undefined;
-    keys?: IterableIterator<number> | undefined;
-    values?: IterableIterator<string> | undefined;
-    includes?: ((searchElement: string, fromIndex?: number | undefined) => boolean) | undefined;
-    flatMap?: (<U_3, This = undefined>(callback: (this: This, value: string, index: number, array: string[]) => U_3 | readonly U_3[], thisArg?: This | undefined) => U_3[]) | undefined;
-    flat?: unknown[] | undefined;
-}) | ({} & {
-    [x: string]: any;
-    [x: number]: any;
-})> & import("vue").VueConstructor<import("vue").default> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<({
-    [x: number]: string;
-} & {
-    length?: number | undefined;
-    toString?: string | undefined;
-    toLocaleString?: string | undefined;
-    pop?: string | undefined;
-    push?: number | undefined;
-    concat?: string[] | undefined;
-    join?: string | undefined;
-    reverse?: string[] | undefined;
-    shift?: string | undefined;
-    slice?: string[] | undefined;
-    sort?: string[] | undefined;
-    splice?: {
-        (start: number, deleteCount?: number | undefined): string[];
-        (start: number, deleteCount: number, ...items: string[]): string[];
-    } | undefined;
-    unshift?: number | undefined;
-    indexOf?: ((searchElement: string, fromIndex?: number | undefined) => number) | undefined;
-    lastIndexOf?: ((searchElement: string, fromIndex?: number | undefined) => number) | undefined;
-    every?: ((callbackfn: (value: string, index: number, array: string[]) => unknown, thisArg?: any) => boolean) | undefined;
-    some?: ((callbackfn: (value: string, index: number, array: string[]) => unknown, thisArg?: any) => boolean) | undefined;
-    forEach?: ((callbackfn: (value: string, index: number, array: string[]) => void, thisArg?: any) => void) | undefined;
-    map?: (<U>(callbackfn: (value: string, index: number, array: string[]) => U, thisArg?: any) => U[]) | undefined;
-    filter?: {
-        <S extends string>(callbackfn: (value: string, index: number, array: string[]) => value is S, thisArg?: any): S[];
-        (callbackfn: (value: string, index: number, array: string[]) => unknown, thisArg?: any): string[];
-    } | undefined;
-    reduce?: {
-        (callbackfn: (previousValue: string, currentValue: string, currentIndex: number, array: string[]) => string): string;
-        (callbackfn: (previousValue: string, currentValue: string, currentIndex: number, array: string[]) => string, initialValue: string): string;
-        <U_1>(callbackfn: (previousValue: U_1, currentValue: string, currentIndex: number, array: string[]) => U_1, initialValue: U_1): U_1;
-    } | undefined;
-    reduceRight?: {
-        (callbackfn: (previousValue: string, currentValue: string, currentIndex: number, array: string[]) => string): string;
-        (callbackfn: (previousValue: string, currentValue: string, currentIndex: number, array: string[]) => string, initialValue: string): string;
-        <U_2>(callbackfn: (previousValue: U_2, currentValue: string, currentIndex: number, array: string[]) => U_2, initialValue: U_2): U_2;
-    } | undefined;
-    find?: {
-        <S_1 extends string>(predicate: (this: void, value: string, index: number, obj: string[]) => value is S_1, thisArg?: any): S_1 | undefined;
-        (predicate: (value: string, index: number, obj: string[]) => unknown, thisArg?: any): string | undefined;
-    } | undefined;
-    findIndex?: ((predicate: (value: string, index: number, obj: string[]) => unknown, thisArg?: any) => number) | undefined;
-    fill?: ((value: string, start?: number | undefined, end?: number | undefined) => string[]) | undefined;
-    copyWithin?: ((target: number, start: number, end?: number | undefined) => string[]) | undefined;
-    entries?: IterableIterator<[number, string]> | undefined;
-    keys?: IterableIterator<number> | undefined;
-    values?: IterableIterator<string> | undefined;
-    includes?: ((searchElement: string, fromIndex?: number | undefined) => boolean) | undefined;
-    flatMap?: (<U_3, This = undefined>(callback: (this: This, value: string, index: number, array: string[]) => U_3 | readonly U_3[], thisArg?: This | undefined) => U_3[]) | undefined;
-    flat?: unknown[] | undefined;
-}) | ({} & {
-    [x: string]: any;
-    [x: number]: any;
-}), import("@vue/composition-api").ShallowUnwrapRef<import("@vue/composition-api").Data>, import("@vue/composition-api").Data, {}, {}, ({
-    [x: number]: string;
-} & {
-    length?: number | undefined;
-    toString?: string | undefined;
-    toLocaleString?: string | undefined;
-    pop?: string | undefined;
-    push?: number | undefined;
-    concat?: string[] | undefined;
-    join?: string | undefined;
-    reverse?: string[] | undefined;
-    shift?: string | undefined;
-    slice?: string[] | undefined;
-    sort?: string[] | undefined;
-    splice?: {
-        (start: number, deleteCount?: number | undefined): string[];
-        (start: number, deleteCount: number, ...items: string[]): string[];
-    } | undefined;
-    unshift?: number | undefined;
-    indexOf?: ((searchElement: string, fromIndex?: number | undefined) => number) | undefined;
-    lastIndexOf?: ((searchElement: string, fromIndex?: number | undefined) => number) | undefined;
-    every?: ((callbackfn: (value: string, index: number, array: string[]) => unknown, thisArg?: any) => boolean) | undefined;
-    some?: ((callbackfn: (value: string, index: number, array: string[]) => unknown, thisArg?: any) => boolean) | undefined;
-    forEach?: ((callbackfn: (value: string, index: number, array: string[]) => void, thisArg?: any) => void) | undefined;
-    map?: (<U>(callbackfn: (value: string, index: number, array: string[]) => U, thisArg?: any) => U[]) | undefined;
-    filter?: {
-        <S extends string>(callbackfn: (value: string, index: number, array: string[]) => value is S, thisArg?: any): S[];
-        (callbackfn: (value: string, index: number, array: string[]) => unknown, thisArg?: any): string[];
-    } | undefined;
-    reduce?: {
-        (callbackfn: (previousValue: string, currentValue: string, currentIndex: number, array: string[]) => string): string;
-        (callbackfn: (previousValue: string, currentValue: string, currentIndex: number, array: string[]) => string, initialValue: string): string;
-        <U_1>(callbackfn: (previousValue: U_1, currentValue: string, currentIndex: number, array: string[]) => U_1, initialValue: U_1): U_1;
-    } | undefined;
-    reduceRight?: {
-        (callbackfn: (previousValue: string, currentValue: string, currentIndex: number, array: string[]) => string): string;
-        (callbackfn: (previousValue: string, currentValue: string, currentIndex: number, array: string[]) => string, initialValue: string): string;
-        <U_2>(callbackfn: (previousValue: U_2, currentValue: string, currentIndex: number, array: string[]) => U_2, initialValue: U_2): U_2;
-    } | undefined;
-    find?: {
-        <S_1 extends string>(predicate: (this: void, value: string, index: number, obj: string[]) => value is S_1, thisArg?: any): S_1 | undefined;
-        (predicate: (value: string, index: number, obj: string[]) => unknown, thisArg?: any): string | undefined;
-    } | undefined;
-    findIndex?: ((predicate: (value: string, index: number, obj: string[]) => unknown, thisArg?: any) => number) | undefined;
-    fill?: ((value: string, start?: number | undefined, end?: number | undefined) => string[]) | undefined;
-    copyWithin?: ((target: number, start: number, end?: number | undefined) => string[]) | undefined;
-    entries?: IterableIterator<[number, string]> | undefined;
-    keys?: IterableIterator<number> | undefined;
-    values?: IterableIterator<string> | undefined;
-    includes?: ((searchElement: string, fromIndex?: number | undefined) => boolean) | undefined;
-    flatMap?: (<U_3, This = undefined>(callback: (this: This, value: string, index: number, array: string[]) => U_3 | readonly U_3[], thisArg?: This | undefined) => U_3[]) | undefined;
-    flat?: unknown[] | undefined;
-}) | ({} & {
-    [x: string]: any;
-    [x: number]: any;
-}), {
-    [x: number]: string;
-} | {}, true>);
-export default _default;

package/dist/views/FilesList/components/UrlCell/index.d.ts

@@ -1 +0,0 @@
-export { default } from './UrlCell.vue';

package/src/views/FilesList/components/UrlCell/UrlCell.vue

@@ -1,68 +0,0 @@
-<template>
-  <div class="url-cell">
-    <a :href="url" target="_blank" class="url-text">{{ cutUrlOrigin(url) }}</a>
-    <base-button variant="icon" class="copy-button" @click="handleCopy(url)">
-      <svg-icon v-if="!isCopied" name="contentCopy" class="icon-size" />
-      <svg-icon v-else name="done" class="icon-size icon-color-green" />
-    </base-button>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from '@vue/composition-api';
-
-import { cutUrlOrigin } from '@tager/admin-ui/src/utils/common';
-import { useCopyToClipboard } from '@tager/admin-ui';
-
-interface Props {
-  url: string;
-}
-
-export default defineComponent<Props>({
-  name: 'UrlCell',
-  props: {
-    url: {
-      type: String,
-      default: '',
-    },
-  },
-  setup() {
-    const [isCopied, handleCopy] = useCopyToClipboard(500);
-
-    return {
-      isCopied,
-      handleCopy,
-      cutUrlOrigin,
-    };
-  },
-});
-</script>
-
-<style lang="scss" scoped>
-.url-cell {
-  display: flex;
-  align-items: center;
-
-  .url-text {
-    color: #007bff;
-
-    &:hover {
-      color: #0056b3;
-      text-decoration: underline;
-    }
-  }
-
-  .copy-button {
-    margin-left: 5px;
-
-    .icon-size {
-      width: 14px;
-      height: 14px;
-    }
-
-    .icon-color-green {
-      color: #22863a;
-    }
-  }
-}
-</style>

package/src/views/FilesList/components/UrlCell/index.ts

@@ -1 +0,0 @@
-export { default } from './UrlCell.vue';