sprintify-ui 0.7.9 → 0.7.11

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

@@ -4,6 +4,7 @@ declare const _default: import("vue").DefineComponent<{}, {
         color: "info" | "success" | "danger" | "warning";
         title: string;
         message: string;
+        html: boolean;
         confirmText: string;
         cancelText: string;
         closeOnOutsideClick: boolean;

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

@@ -76,6 +76,13 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: boolean;
         type: BooleanConstructor;
     };
+    /**
+     * Filters position
+     */
+    filtersPosition: {
+        default: string;
+        type: PropType<"section" | "top">;
+    };
 }, {
     fetch: () => void;
     fetchWithLoading: () => void;
@@ -171,6 +178,13 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: boolean;
         type: BooleanConstructor;
     };
+    /**
+     * Filters position
+     */
+    filtersPosition: {
+        default: string;
+        type: PropType<"section" | "top">;
+    };
 }>> & {
     onClick?: ((...args: any[]) => any) | undefined;
     onDelete?: ((...args: any[]) => any) | undefined;
@@ -190,6 +204,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     layout: "default" | "compact";
     sections: DataIteratorSection[];
     scrollTopOnFetch: boolean;
+    filtersPosition: "section" | "top";
 }, {}>, Partial<Record<string, (_: {
     query: {
         [x: string]: any;
@@ -210,6 +225,16 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     };
     updateQuery: (newQuery: DataTableQuery) => void;
     updateQueryValue: (key: string, value: any) => void;
+}) => any>> & Partial<Record<string, (_: {
+    query: {
+        [x: string]: any;
+        page?: number | undefined;
+        sort?: string | undefined;
+        search?: string | undefined;
+        filter?: Record<string, any> | undefined;
+    };
+    updateQuery: (newQuery: DataTableQuery) => void;
+    updateQueryValue: (key: string, value: any) => void;
 }) => any>> & {
     default?(_: {
         items: Collection;

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

@@ -186,6 +186,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: boolean;
         type: BooleanConstructor;
     };
+    filtersPosition: {
+        default: string;
+        type: PropType<"section" | "top">;
+    };
 }, {
     fetch: typeof fetch;
     fetchWithoutLoading: typeof fetchWithoutLoading;
@@ -377,6 +381,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: boolean;
         type: BooleanConstructor;
     };
+    filtersPosition: {
+        default: string;
+        type: PropType<"section" | "top">;
+    };
 }>> & {
     onDelete?: ((...args: any[]) => any) | undefined;
     "onUpdate:checked-rows"?: ((...args: any[]) => any) | undefined;
@@ -392,6 +400,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     layout: "default" | "compact";
     sections: DataIteratorSection[];
     scrollTopOnFetch: boolean;
+    filtersPosition: "section" | "top";
     showUrl: ((row: CollectionItem) => RouteLocationRaw) | undefined;
     editButton: boolean;
     editUrl: ((row: CollectionItem) => RouteLocationRaw) | undefined;

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

@@ -12,6 +12,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: string;
         type: StringConstructor;
     };
+    html: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
     confirmText: {
         default(): string;
         type: StringConstructor;
@@ -36,6 +40,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: string;
         type: StringConstructor;
     };
+    html: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
     confirmText: {
         default(): string;
         type: StringConstructor;
@@ -50,6 +58,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
 }, {
     title: string;
     message: string;
+    html: boolean;
     confirmText: string;
     cancelText: string;
 }, {}>, {

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

@@ -7,7 +7,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     };
     placement: {
         default: string;
-        type: PropType<"bottom-end" | "bottom-start" | "bottom" | "top" | "top-start" | "top-end">;
+        type: PropType<"top" | "bottom-end" | "bottom-start" | "bottom" | "top-start" | "top-end">;
     };
     size: {
         default: string;
@@ -32,7 +32,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     };
     placement: {
         default: string;
-        type: PropType<"bottom-end" | "bottom-start" | "bottom" | "top" | "top-start" | "top-end">;
+        type: PropType<"top" | "bottom-end" | "bottom-start" | "bottom" | "top-start" | "top-end">;
     };
     size: {
         default: string;
@@ -54,7 +54,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     size: "xs" | "sm" | "md";
     twButton: string | unknown[] | Record<string, any>;
     items: ActionItem[];
-    placement: "bottom-end" | "bottom-start" | "bottom" | "top" | "top-start" | "top-end";
+    placement: "top" | "bottom-end" | "bottom-start" | "bottom" | "top-start" | "top-end";
     width: number;
     twMenu: string | string[];
 }, {}>, {

package/dist/types/types/index.d.ts

@@ -116,6 +116,7 @@ export interface DialogOptions {
     color?: 'info' | 'success' | 'danger' | 'warning';
     title: string;
     message: string;
+    html?: boolean;
     confirmText?: string;
     cancelText?: string;
     closeOnOutsideClick?: boolean;
@@ -127,6 +128,7 @@ export interface Dialog {
     color: 'info' | 'success' | 'danger' | 'warning';
     title: string;
     message: string;
+    html: boolean;
     confirmText: string;
     cancelText: string;
     closeOnOutsideClick: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.7.9",
+  "version": "0.7.11",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",
     "build-fast": "rimraf dist && vite build",

package/src/components/BaseAppDialogs.vue

@@ -47,6 +47,7 @@
             :title="dialog.title"
             :message="dialog.message"
             :confirm-text="dialog.confirmText"
+            :html="dialog.html"
             :cancel-text="dialog.cancelText"
             @cancel="cancel(dialog)"
             @confirm="confirm(dialog)"

package/src/components/BaseDataIterator.stories.js

@@ -12,7 +12,11 @@ export default {
     size: {
       control: { type: 'select' },
       options: sizes,
-    }
+    },
+    filtersPosition: {
+      control: { type: 'select' },
+      options: ['top', 'section'],
+    },
   },
   args: {
     url: 'https://effettandem.com/api/content/articles',

package/src/components/BaseDataIterator.vue

@@ -68,6 +68,24 @@
           </BaseMenu>
         </div>
 
+        <div
+          v-if="filtersPosition == 'top' && hasFilters"
+          :class="{
+            'mb-2.5': sizeInternal.size.value == 'sm',
+            'mb-4': sizeInternal.size.value == 'md',
+          }"
+        >
+          <BaseDataIteratorSectionBox :section="sectionFilter">
+            <slot
+              :name="sectionFilter.name"
+              :query="query"
+              :update-query="updateFilterQuery"
+              :update-query-value="updateFilterQueryValue"
+            />
+          </BaseDataIteratorSectionBox>
+        </div>
+
+
         <slot
           :items="items"
           :loading="loading"
@@ -286,6 +304,14 @@ const props = defineProps({
     default: true,
     type: Boolean,
   },
+
+  /**
+   * Filters position
+   */
+  filtersPosition: {
+    default: 'section',
+    type: String as PropType<'section' | 'top'>,
+  }
 });
 
 const http = config.http;
@@ -745,18 +771,22 @@ onMounted(() => {
 
 const sectionModalActive = ref<null | number>(null);
 
+const sectionFilter = computed(() => {
+  return {
+    name: 'filters',
+    title: t('sui.filters'),
+    closeText: t('sui.apply_filters'),
+    icon: 'heroicons:funnel',
+    opened: true,
+  };
+});
+
 const sectionsInternal = computed<DataIteratorSection[]>(() => {
   const sections = props.sections ?? [];
 
-  if (hasFilters.value) {
+  if (hasFilters.value && props.filtersPosition == 'section') {
     return [
-      {
-        name: 'filters',
-        title: t('sui.filters'),
-        closeText: t('sui.apply_filters'),
-        icon: 'heroicons:funnel',
-        opened: true,
-      },
+      sectionFilter.value,
       ...sections,
     ];
   }

package/src/components/BaseDataTable.stories.js

@@ -20,7 +20,11 @@ export default {
     size: {
       control: { type: 'select' },
       options: ['sm', 'md'],
-    }
+    },
+    filtersPosition: {
+      control: { type: 'select' },
+      options: ['top', 'section'],
+    },
   },
   args: {
     url: 'https://effettandem.com/api/content/articles',

package/src/components/BaseDataTable.vue

@@ -11,6 +11,7 @@
     :size="sizeInternal.size.value"
     :sections="sectionsInternal"
     :scroll-top-on-fetch="maxHeight ? false : scrollTopOnFetch"
+    :filters-position="filtersPosition"
     @fetch="onFetch"
     @will-scroll-top="onWillScrollTop"
   >
@@ -487,6 +488,11 @@ const props = defineProps({
     default: true,
     type: Boolean,
   },
+
+  filtersPosition: {
+    default: 'section',
+    type: String as PropType<'top' | 'section'>,
+  },
 });
 
 const sizeInternal = useInputSize(props.size);

package/src/components/BaseDialog.stories.js

@@ -34,6 +34,13 @@ Demo.args = {
   title: 'Be careful',
 };
 
+export const Html = Template.bind({});
+Html.args = {
+  title: 'Be careful',
+  message: '<strong>HTML</strong> is allowed. <a href="#">Link</a><p>Eiusmod id Lorem est ullamco et ex exercitation cupidatat do velit nisi Lorem officia et.</p>',
+  html: true,
+};
+
 const ColorsTemplate = (args) => ({
   components: { BaseDialog },
   setup() {

package/src/components/BaseDialog.vue

@@ -42,7 +42,15 @@
             {{ title }}
           </h3>
           <div class="mt-2">
-            <p class="text-sm text-slate-500">
+            <div
+              v-if="html"
+              class="text-slate-500 prose-sm prose-p:leading-snug prose-a:text-blue-600 prose-a:underline"
+              v-html="message"
+            />
+            <p
+              v-else
+              class="text-sm text-slate-500"
+            >
               {{ message }}
             </p>
           </div>
@@ -91,6 +99,10 @@ defineProps({
     default: '',
     type: String,
   },
+  html: {
+    default: false,
+    type: Boolean,
+  },
   confirmText: {
     default() {
       return t('sui.confirm');

package/src/stores/dialogs.ts

@@ -17,6 +17,7 @@ export const useDialogsStore = defineStore('dialogs', {
         color: options.color ?? 'info',
         title: options.title,
         message: options.message,
+        html: options.html ?? false,
         confirmText: options.confirmText ?? t('sui.confirm'),
         cancelText: options.cancelText ?? t('sui.cancel'),
         closeOnOutsideClick: options.closeOnOutsideClick ?? true,

package/src/types/index.ts

@@ -150,6 +150,7 @@ export interface DialogOptions {
   color?: 'info' | 'success' | 'danger' | 'warning';
   title: string;
   message: string;
+  html?: boolean;
   confirmText?: string;
   cancelText?: string;
   closeOnOutsideClick?: boolean;
@@ -162,6 +163,7 @@ export interface Dialog {
   color: 'info' | 'success' | 'danger' | 'warning';
   title: string;
   message: string;
+  html: boolean;
   confirmText: string;
   cancelText: string;
   closeOnOutsideClick: boolean;