@tager/admin-blog 1.0.0 → 1.0.1

package/dist/index.mjs

@@ -1,9 +1,9 @@
 import { i18n, request, useResource, createId, notEmpty, isNotNullish, useI18n, useResourceDelete, useResourceClone, useToast, navigateBack, convertRequestErrorToMap, urlTranslit, getWebsiteOrigin } from "@tager/admin-services";
-import { onMounted, watch, computed, ref, defineComponent, resolveComponent, openBlock, createBlock, withCtx, createVNode, createElementVNode, createCommentVNode, toDisplayString, createElementBlock, createTextVNode, Fragment, renderList, normalizeClass, withModifiers, createSlots } from "vue";
+import { onMounted, watch, computed, ref, defineComponent, resolveComponent, openBlock, createBlock, withCtx, createVNode, createElementVNode, createCommentVNode, toDisplayString, createElementBlock, createTextVNode, withModifiers, Fragment, renderList, createSlots } from "vue";
 import isEqual from "lodash.isequal";
 import pick from "lodash.pick";
 import { useRoute, useRouter } from "vue-router";
-import { getFilterParamAsStringArray, getFilterParamAsString, getFilterParams, DeleteIcon, ContentCopyIcon, EditIcon, BaseButton, FormField, FormFieldMultiSelect, AdvancedSearch, DataTable, useDataTable, formatDateTime, SeoFieldGroup, FormFieldFileInput, FormFieldRichTextInput, FormFieldCheckbox, FormFieldUrlAliasInput, FormFieldSelect, ShortCodeConstructor, FormFooter, createTabErrorFinder, SouthIcon, NorthIcon, CountButton } from "@tager/admin-ui";
+import { getFilterParamAsStringArray, getFilterParamAsString, getFilterParams, DeleteIcon, ContentCopyIcon, EditIcon, BaseButton, FormField, FormFieldMultiSelect, AdvancedSearch, DataTable, useDataTable, formatDateTime, SeoFieldGroup, FormFieldFileInput, FormFieldRichTextInput, FormFieldCheckbox, FormFieldUrlAliasInput, FormFieldSelect, TabList, ShortCodeConstructor, FormFooter, createTabErrorFinder, SouthIcon, NorthIcon, CountButton } from "@tager/admin-ui";
 import { Page } from "@tager/admin-layout";
 import { universalFieldUtils, DynamicField } from "@tager/admin-dynamic-field";
 import { compile } from "path-to-regexp";
@@ -711,7 +711,7 @@ var _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const _sfc_main$4 = defineComponent({
+const _sfc_main$3 = defineComponent({
   name: "PostList",
   components: {
     DeleteIcon,
@@ -872,12 +872,12 @@ const _sfc_main$4 = defineComponent({
     };
   }
 });
-const _hoisted_1$3 = { class: "filters" };
-const _hoisted_2$2 = { class: "filters" };
-const _hoisted_3$2 = { class: "status" };
+const _hoisted_1$2 = { class: "filters" };
+const _hoisted_2$1 = { class: "filters" };
+const _hoisted_3$1 = { class: "status" };
 const _hoisted_4$1 = { key: 0 };
 const _hoisted_5 = { key: 1 };
-function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_FormFieldMultiSelect = resolveComponent("FormFieldMultiSelect");
   const _component_FormField = resolveComponent("FormField");
   const _component_AdvancedSearch = resolveComponent("AdvancedSearch");
@@ -918,7 +918,7 @@ function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
             "onClick:tag": _ctx.tagRemovalHandler
           }, {
             default: withCtx(() => [
-              createElementVNode("div", _hoisted_1$3, [
+              createElementVNode("div", _hoisted_1$2, [
                 createVNode(_component_FormFieldMultiSelect, {
                   "selected-options": _ctx.categoryFilter,
                   "onUpdate:selected-options": _cache[0] || (_cache[0] = ($event) => _ctx.categoryFilter = $event),
@@ -948,7 +948,7 @@ function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
                   class: "filter"
                 }, null, 8, ["selected-options", "options", "label"])
               ]),
-              createElementVNode("div", _hoisted_2$2, [
+              createElementVNode("div", _hoisted_2$1, [
                 createVNode(_component_FormField, {
                   value: _ctx.fromDateFilter,
                   "onUpdate:value": _cache[3] || (_cache[3] = ($event) => _ctx.fromDateFilter = $event),
@@ -971,7 +971,7 @@ function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
           }, 8, ["tags", "onClick:tag"])
         ]),
         "cell(status)": withCtx(({ row }) => [
-          createElementVNode("div", _hoisted_3$2, [
+          createElementVNode("div", _hoisted_3$1, [
             createElementVNode("span", null, toDisplayString(_ctx.getStatuses(_ctx.$i18n.t)[row.status]), 1),
             row.status === "PUBLISHED" && row.archiveAt ? (openBlock(), createElementBlock("span", _hoisted_4$1, [
               createTextVNode(toDisplayString(_ctx.$i18n.t("blog:archiveAtLabel")) + ": ", 1),
@@ -1024,57 +1024,7 @@ function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
     _: 1
   }, 8, ["title", "header-buttons"]);
 }
-var BlogPostList = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["render", _sfc_render$4], ["__scopeId", "data-v-2ee9b750"]]);
-var TabList_vue_vue_type_style_index_0_scoped_true_lang = "";
-const _sfc_main$3 = defineComponent({
-  name: "TabList",
-  props: {
-    tabList: {
-      type: Array,
-      required: true
-    },
-    selectedTabId: {
-      type: String,
-      required: true
-    }
-  },
-  setup(props, context) {
-    function handleTabClick(tabId) {
-      if (props.selectedTabId === tabId)
-        return;
-      context.emit("tab:update", { tabId });
-    }
-    return {
-      handleTabClick
-    };
-  }
-});
-const _hoisted_1$2 = { class: "tab-list" };
-const _hoisted_2$1 = ["onClick"];
-const _hoisted_3$1 = { key: 0 };
-function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("ul", _hoisted_1$2, [
-    (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.tabList, (tab) => {
-      return openBlock(), createElementBlock("li", {
-        key: tab.id,
-        class: normalizeClass([
-          "tab",
-          { active: _ctx.selectedTabId === tab.id, invalid: tab.hasErrors }
-        ])
-      }, [
-        createElementVNode("button", {
-          class: "tab-button",
-          type: "button",
-          onClick: ($event) => _ctx.handleTabClick(tab.id)
-        }, [
-          createTextVNode(toDisplayString(tab.label) + " ", 1),
-          tab.hasErrors ? (openBlock(), createElementBlock("span", _hoisted_3$1, "*")) : createCommentVNode("", true)
-        ], 8, _hoisted_2$1)
-      ], 2);
-    }), 128))
-  ]);
-}
-var TabList = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render$3], ["__scopeId", "data-v-6a295e80"]]);
+var BlogPostList = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render$3], ["__scopeId", "data-v-2ee9b750"]]);
 var PostForm_vue_vue_type_style_index_0_scoped_true_lang = "";
 const _sfc_main$2 = defineComponent({
   name: "BlogPostForm",
@@ -1422,10 +1372,10 @@ function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
         onSubmit: _cache[16] || (_cache[16] = withModifiers((...args) => _ctx.submitForm && _ctx.submitForm(...args), ["prevent"]))
       }, [
         createVNode(_component_TabList, {
-          "tab-list": _ctx.tabList,
-          "selected-tab-id": _ctx.selectedTabId,
-          "onTab:update": _cache[0] || (_cache[0] = ($event) => _ctx.selectedTabId = $event.tabId)
-        }, null, 8, ["tab-list", "selected-tab-id"]),
+          "tab-id": _ctx.selectedTabId,
+          "onUpdate:tab-id": _cache[0] || (_cache[0] = ($event) => _ctx.selectedTabId = $event),
+          "tab-list": _ctx.tabList
+        }, null, 8, ["tab-id", "tab-list"]),
         _ctx.selectedTabId === "common" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
           _ctx.isCreation && _ctx.isLangSpecific ? (openBlock(), createBlock(_component_FormFieldSelect, {
             key: 0,
@@ -1605,7 +1555,7 @@ function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
     _: 1
   }, 8, ["title", "is-content-loading", "header-buttons", "footer"]);
 }
-var BlogPostForm = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$2], ["__scopeId", "data-v-f83e0146"]]);
+var BlogPostForm = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$2], ["__scopeId", "data-v-62596ad5"]]);
 function convertCategoryList(categoryList, languages) {
   return categoryList.map((category) => {
     if (languages.length > 0) {
@@ -2236,10 +2186,10 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           }, null, 8, ["value", "label", "url-template", "error", "onChange"])
         ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
           createVNode(_component_TabList, {
-            "tab-list": _ctx.tabList,
-            "selected-tab-id": _ctx.selectedTabId,
-            "onTab:update": _cache[4] || (_cache[4] = ($event) => _ctx.selectedTabId = $event.tabId)
-          }, null, 8, ["tab-list", "selected-tab-id"]),
+            "tab-id": _ctx.selectedTabId,
+            "onUpdate:tab-id": _cache[4] || (_cache[4] = ($event) => _ctx.selectedTabId = $event),
+            "tab-list": _ctx.tabList
+          }, null, 8, ["tab-id", "tab-list"]),
           _ctx.selectedTabId === "common" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
             _ctx.isLangSpecific ? (openBlock(), createBlock(_component_FormFieldSelect, {
               key: 0,

package/dist/style.css

@@ -1 +1 @@
-.filters[data-v-2ee9b750]{margin-bottom:1rem;width:100%;display:grid;gap:1rem;grid-template-columns:1fr 1fr}.filters[data-v-2ee9b750]:not(:first-child){margin-top:1rem}.status span[data-v-2ee9b750]:first-child{display:block}.status span[data-v-2ee9b750]:nth-child(2){display:block;margin-top:5px;font-size:.8rem}.status span:nth-child(2) i[data-v-2ee9b750]{display:block}.tab-list[data-v-6a295e80]{display:flex;border-bottom:1px solid #eee;margin:-1rem -1rem 1.5rem}.tab[data-v-6a295e80]{display:block;border-top:3px solid transparent;margin-bottom:-1px}.tab[data-v-6a295e80]:not(.active):not(.invalid):hover{color:var(--secondary)}.tab.active[data-v-6a295e80]{background-color:#fff;border-top-color:var(--primary)}.tab.active:not(:first-child) .tab-button[data-v-6a295e80]{border-left-color:#eee}.tab.active .tab-button[data-v-6a295e80]{cursor:default;border-right-color:#eee}.tab.invalid[data-v-6a295e80]{color:red}.tab-button[data-v-6a295e80]{padding:.7rem 2rem;border-right:1px solid transparent;border-left:1px solid transparent;color:inherit;font-weight:inherit}.status[data-v-f83e0146]{display:flex;align-items:flex-end}.status-value[data-v-f83e0146]{flex-basis:50%}.status-checkbox[data-v-f83e0146]{margin-left:20px;padding-bottom:8px}.status-date[data-v-f83e0146]{margin-left:20px;flex:1 1 1px}
+.filters[data-v-2ee9b750]{margin-bottom:1rem;width:100%;display:grid;gap:1rem;grid-template-columns:1fr 1fr}.filters[data-v-2ee9b750]:not(:first-child){margin-top:1rem}.status span[data-v-2ee9b750]:first-child{display:block}.status span[data-v-2ee9b750]:nth-child(2){display:block;margin-top:5px;font-size:.8rem}.status span:nth-child(2) i[data-v-2ee9b750]{display:block}.status[data-v-62596ad5]{display:flex;align-items:flex-end}.status-value[data-v-62596ad5]{flex-basis:50%}.status-checkbox[data-v-62596ad5]{margin-left:20px;padding-bottom:8px}.status-date[data-v-62596ad5]{margin-left:20px;flex:1 1 1px}

package/package.json

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

package/src/views/Categories/CategoryForm/CategoryForm.vue

@@ -48,11 +48,7 @@
         </template>
 
         <template v-else>
-          <TabList
-            :tab-list="tabList"
-            :selected-tab-id="selectedTabId"
-            @tab:update="selectedTabId = $event.tabId"
-          />
+          <TabList v-model:tab-id="selectedTabId" :tab-list="tabList" />
 
           <template v-if="selectedTabId === 'common'">
             <FormFieldSelect
@@ -152,6 +148,7 @@ import {
   FormFieldUrlAliasInput,
   FormFieldCheckbox,
   SeoFieldGroup,
+  TabList,
 } from '@tager/admin-ui';
 import { Page } from '@tager/admin-layout';
 
@@ -166,7 +163,6 @@ import {
 } from '../../../utils/paths';
 import { CategoryFormValues, Language } from '../../../typings/model';
 import { createCategory, updateCategory } from '../../../services/requests';
-import TabList from '../../Posts/PostForm/components/TabList/TabList.vue';
 
 import {
   convertCategoryFormValuesToPayload,

package/src/views/Posts/PostForm/PostForm.vue

@@ -13,11 +13,7 @@
   >
     <template #content>
       <form novalidate @submit.prevent="submitForm">
-        <TabList
-          :tab-list="tabList"
-          :selected-tab-id="selectedTabId"
-          @tab:update="selectedTabId = $event.tabId"
-        />
+        <TabList v-model:tab-id="selectedTabId" :tab-list="tabList" />
 
         <template v-if="selectedTabId === 'common'">
           <FormFieldSelect
@@ -258,6 +254,7 @@ import {
   FormFieldFileInput,
   FormFieldMultiSelect,
   SeoFieldGroup,
+  TabList,
 } from '@tager/admin-ui';
 import { DynamicField } from '@tager/admin-dynamic-field';
 import { Page } from '@tager/admin-layout';
@@ -283,7 +280,6 @@ import {
   FormValues,
   getStatusOptions,
 } from './PostForm.helpers';
-import TabList from './components/TabList/TabList.vue';
 
 export default defineComponent({
   name: 'BlogPostForm',

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

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

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

@@ -1,23 +0,0 @@
-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 +0,0 @@
-export { default } from './TabList.vue';
-export * from './TabList.types';

package/src/views/Posts/PostForm/components/TabList/TabList.types.ts

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

package/src/views/Posts/PostForm/components/TabList/TabList.vue

@@ -1,92 +0,0 @@
-<template>
-  <ul class="tab-list">
-    <li
-      v-for="tab of tabList"
-      :key="tab.id"
-      :class="[
-        'tab',
-        { active: selectedTabId === tab.id, invalid: tab.hasErrors },
-      ]"
-    >
-      <button class="tab-button" type="button" @click="handleTabClick(tab.id)">
-        {{ tab.label }} <span v-if="tab.hasErrors">*</span>
-      </button>
-    </li>
-  </ul>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-
-import { TabType } from './TabList.types';
-
-export default defineComponent({
-  name: 'TabList',
-  props: {
-    tabList: {
-      type: Array as () => TabType[],
-      required: true,
-    },
-    selectedTabId: {
-      type: String,
-      required: true,
-    },
-  },
-  setup(props, context) {
-    function handleTabClick(tabId: TabType['id']) {
-      if (props.selectedTabId === tabId) return;
-
-      context.emit('tab:update', { tabId });
-    }
-
-    return {
-      handleTabClick,
-    };
-  },
-});
-</script>
-
-<style scoped lang="scss">
-.tab-list {
-  display: flex;
-  border-bottom: 1px solid #eee;
-  margin: -1rem -1rem 1.5rem -1rem;
-}
-
-.tab {
-  display: block;
-  border-top: 3px solid transparent;
-
-  margin-bottom: -1px;
-
-  &:not(.active):not(.invalid):hover {
-    color: var(--secondary);
-  }
-
-  &.active {
-    background-color: #fff;
-    border-top-color: var(--primary);
-
-    &:not(:first-child) .tab-button {
-      border-left-color: #eee;
-    }
-
-    .tab-button {
-      cursor: default;
-      border-right-color: #eee;
-    }
-  }
-
-  &.invalid {
-    color: red;
-  }
-}
-
-.tab-button {
-  padding: 0.7rem 2rem;
-  border-right: 1px solid transparent;
-  border-left: 1px solid transparent;
-  color: inherit;
-  font-weight: inherit;
-}
-</style>

package/src/views/Posts/PostForm/components/TabList/index.ts

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