sprintify-ui 0.11.7 → 0.11.9

package/dist/types/components/BaseHeader.vue.d.ts

@@ -1,20 +1,22 @@
 import { Breadcrumb, ActionItem } from '@/types';
 import BaseBadge from './BaseBadge.vue';
-import { RouteRecordRaw } from 'vue-router';
+import { RouteLocationRaw } from 'vue-router';
 type BaseBadgeProps = InstanceType<typeof BaseBadge>["$props"] & {
     label: string;
 };
+interface HeaderAttribute {
+    icon?: string;
+    label: string;
+    tooltip?: string;
+    to?: RouteLocationRaw;
+    href?: string;
+    action?: () => Promise<void> | void;
+    target?: string;
+}
 type __VLS_Props = {
     title: string;
     subtitle?: string;
-    attributes?: {
-        icon?: string;
-        label: string;
-        tooltip?: string;
-        to?: RouteRecordRaw;
-        href?: string;
-        target?: string;
-    }[];
+    attributes?: HeaderAttribute[];
     actions?: ActionItem[];
     badge?: BaseBadgeProps;
     layout?: 'default' | 'compact';
@@ -26,14 +28,7 @@ declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {
     maxActions: number;
     breadcrumbs: Breadcrumb[];
     layout: "default" | "compact";
-    attributes: {
-        icon?: string;
-        label: string;
-        tooltip?: string;
-        to?: RouteRecordRaw;
-        href?: string;
-        target?: string;
-    }[];
+    attributes: HeaderAttribute[];
     subtitle: string;
     badge: BaseBadgeProps;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.11.7",
+  "version": "0.11.9",
   "type": "module",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",

package/src/assets/base-rich-text.css

@@ -46,6 +46,11 @@ body {
         @apply text-base leading-relaxed;
         margin: 1em 0;
       }
+
+      p:has(+ ol),
+      p:has(+ ul) {
+        margin-bottom: 0;
+      }
   
       h1,
       h2,
@@ -299,4 +304,4 @@ body .tiptap {
       height: 0;
       pointer-events: none;
     }
-  }
+  }

package/src/assets/main.css

@@ -54,3 +54,19 @@
     border-radius: 0;
   }
 }
+
+/** prose overwrites */
+
+body .prose {
+
+  line-height: 1.5;
+
+  & p:has(+ ol),
+  & p:has(+ ul) {
+    margin-bottom: 0;
+  }
+
+  ul, ol {
+    margin-top: 0;
+  }
+}

package/src/components/BaseCkeditor.vue

@@ -13,7 +13,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ClassicEditor, InlineEditor, BalloonEditor, Essentials, SourceEditing, MediaEmbed, Paragraph, Bold, Italic, List, Link, Autoformat, Heading, Underline, Code, CodeBlock, Table, TableToolbar, Image, ImageResize, ImageStyle, ImageToolbar, ImageInsert, AutoImage, Base64UploadAdapter, PasteFromOffice, BlockToolbar, Font, FindAndReplace, RemoveFormat } from 'ckeditor5';
+import { ClassicEditor, InlineEditor, BalloonEditor, Essentials, SourceEditing, MediaEmbed, Paragraph, Bold, Italic, List, Link, Autoformat, Heading, Underline, Code, CodeBlock, Indent, IndentBlock, Table, TableToolbar, Image, ImageResize, ImageStyle, ImageToolbar, ImageInsert, AutoImage, Base64UploadAdapter, PasteFromOffice, BlockToolbar, Font, FindAndReplace, RemoveFormat } from 'ckeditor5';
 import { Ckeditor } from '@ckeditor/ckeditor5-vue';
 import { Size } from '@/utils/sizes';
 import { ToolbarOption } from '@/types/ToolbarOption';
@@ -33,11 +33,11 @@ const props = withDefaults(defineProps<{
       'undo',
       'redo',
       '|',
-      'sourceEditing',
       'heading',
       'bold',
       'italic',
       'underline',
+      'fontBackgroundColor',
       '|',
       'link',
       'insertImage',
@@ -45,9 +45,6 @@ const props = withDefaults(defineProps<{
       'numberedList',
       'bulletedList',
       '|',
-      'code',
-      'codeblock',
-      '|',
       'insertTable'
     ] as ToolbarOption[];
   },
@@ -99,6 +96,8 @@ const config = computed(() => {
       Code,
       CodeBlock,
       List,
+      Indent,
+      IndentBlock,
       Link,
       Autoformat,
       Heading,

package/src/components/BaseHeader.stories.js

@@ -42,6 +42,25 @@ const attributes = [
     tooltip: "Anywhere",
     to: '/articles'
   },
+  {
+    label: 'URL',
+    icon: 'heroicons:link-solid',
+    href: 'https://example.com'
+  },
+  {
+    label: 'URL (new tab)',
+    icon: 'heroicons:link-solid',
+    href: 'https://example.com',
+    target: '_blank'
+  },
+  {
+    label: 'Action',
+    icon: 'heroicons:play-solid',
+    tooltip: 'Run action',
+    action() {
+      alert('Action');
+    }
+  }
 ];
 
 const actions = [

package/src/components/BaseHeader.vue

@@ -51,11 +51,13 @@
             :delay="400"
           >
             <component
-              :is="attribute.to ? 'router-link' : (attribute.href ? 'a' : 'div')"
+              :is="attribute.to ? 'router-link' : (attribute.href ? 'a' : (attribute.action ? 'button' : 'div'))"
               :to="attribute.to"
               :href="attribute.href"
+              :type="attribute.action && !attribute.to && !attribute.href ? 'button' : undefined"
               :target="attribute.target ?? undefined"
               class="flex items-center gap-1.5"
+              @click="attribute.action && !attribute.to && !attribute.href ? onAttributeClick(attribute.action) : undefined"
             >
               <BaseIcon
                 v-if="attribute.icon"
@@ -98,17 +100,27 @@ import { BaseBreadcrumbs, BaseIcon } from '..';
 import BaseBadge from './BaseBadge.vue';
 import BaseTooltip from './BaseTooltip.vue';
 import BaseActionButtons from './BaseActionButtons.vue';
-import { RouteRecordRaw } from 'vue-router';
+import { RouteLocationRaw } from 'vue-router';
 
 type BaseBadgeProps = InstanceType<typeof BaseBadge>["$props"] & {
   label: string;
 };
 
+interface HeaderAttribute {
+  icon?: string;
+  label: string;
+  tooltip?: string;
+  to?: RouteLocationRaw;
+  href?: string;
+  action?: () => Promise<void> | void;
+  target?: string;
+}
+
 const props = withDefaults(
   defineProps<{
     title: string;
     subtitle?: string;
-    attributes?: { icon?: string; label: string; tooltip?: string, to?: RouteRecordRaw, href?: string, target?: string }[];
+    attributes?: HeaderAttribute[];
     actions?: ActionItem[];
     badge?: BaseBadgeProps;
     layout?: 'default' | 'compact';
@@ -140,4 +152,8 @@ const compactLayout = computed(() => {
   return width.value < 500;
 });
 
+async function onAttributeClick(action: () => Promise<void> | void) {
+  await action();
+}
+
 </script>

package/src/components/BaseRichText.stories.js

@@ -42,6 +42,7 @@ const Template = (args) => ({
   },
   template: `
     <BaseRichText v-model="value" v-bind="args" class="w-full"></BaseRichText>
+    <div class="prose" v-html="value"></div>
     <ShowValue :value="value" />
   `,
 });