sprintify-ui 0.4.5 → 0.4.6

package/src/stores/dialogs.ts

@@ -1,45 +1,45 @@
-import { defineStore } from 'pinia';
-import { Dialog, DialogOptions } from '../types';
-import { t } from '@/i18n';
-
-export const useDialogsStore = defineStore('dialogs', {
-  state: () => {
-    return {
-      count: 0,
-      dialogs: [] as Dialog[],
-    };
-  },
-  actions: {
-    push(options: DialogOptions) {
-      this.count++;
-      this.dialogs.push({
-        id: this.count,
-        color: options.color ?? 'info',
-        title: options.title,
-        message: options.message,
-        confirmText: options.confirmText ?? t('sui.confirm'),
-        cancelText: options.cancelText ?? t('sui.cancel'),
-        closeOnOutsideClick: options.closeOnOutsideClick ?? true,
-        onConfirm:
-          options.onConfirm ??
-          function () {
-            return;
-          },
-        onCancel:
-          options.onCancel ??
-          function () {
-            return;
-          },
-      });
-    },
-    remove(dialog: Dialog) {
-      this.dialogs.splice(
-        this.dialogs.findIndex((a) => a.id === dialog.id),
-        1
-      );
-    },
-    clear() {
-      this.dialogs = [];
-    },
-  },
-});
+import { defineStore } from 'pinia';
+import { Dialog, DialogOptions } from '../types';
+import { t } from '@/i18n';
+
+export const useDialogsStore = defineStore('dialogs', {
+  state: () => {
+    return {
+      count: 0,
+      dialogs: [] as Dialog[],
+    };
+  },
+  actions: {
+    push(options: DialogOptions) {
+      this.count++;
+      this.dialogs.push({
+        id: this.count,
+        color: options.color ?? 'info',
+        title: options.title,
+        message: options.message,
+        confirmText: options.confirmText ?? t('sui.confirm'),
+        cancelText: options.cancelText ?? t('sui.cancel'),
+        closeOnOutsideClick: options.closeOnOutsideClick ?? true,
+        onConfirm:
+          options.onConfirm ??
+          function () {
+            return;
+          },
+        onCancel:
+          options.onCancel ??
+          function () {
+            return;
+          },
+      });
+    },
+    remove(dialog: Dialog) {
+      this.dialogs.splice(
+        this.dialogs.findIndex((a) => a.id === dialog.id),
+        1
+      );
+    },
+    clear() {
+      this.dialogs = [];
+    },
+  },
+});

package/src/stores/i18n.ts

@@ -1,14 +1,14 @@
-import { defineStore } from 'pinia';
-
-export const useI18nStore = defineStore('i18n', {
-  state: () => {
-    return {
-      locale: 'en',
-    };
-  },
-  actions: {
-    set(locale: string) {
-      this.locale = locale;
-    },
-  },
-});
+import { defineStore } from 'pinia';
+
+export const useI18nStore = defineStore('i18n', {
+  state: () => {
+    return {
+      locale: 'en',
+    };
+  },
+  actions: {
+    set(locale: string) {
+      this.locale = locale;
+    },
+  },
+});

package/src/stores/notifications.ts

@@ -1,47 +1,47 @@
-import { defineStore } from 'pinia';
-import { Notification, NotificationOptions } from '../types';
-
-export const useNotificationsStore = defineStore('notifications', {
-  state: () => {
-    return {
-      count: 0,
-      notifications: [] as Notification[],
-      timeouts: {} as Record<number, number>,
-    };
-  },
-  actions: {
-    push(options: NotificationOptions) {
-      this.count++;
-
-      const id = this.count;
-
-      const notification = {
-        id: id,
-        color: options.color ?? 'info',
-        title: options.title,
-        text: options.text,
-        duration: options.duration ?? 3000,
-      };
-
-      this.notifications.push(notification);
-
-      this.timeouts[id] = setTimeout(() => {
-        this.remove(notification);
-      }, notification.duration);
-    },
-    remove(notification: Notification) {
-      this.notifications.splice(
-        this.notifications.findIndex((n) => n.id === notification.id),
-        1
-      );
-      clearTimeout(this.timeouts[notification.id]);
-    },
-    clear() {
-      this.notifications = [];
-      Object.values(this.timeouts).forEach((timeout) => {
-        clearTimeout(timeout);
-      });
-      this.timeouts = [];
-    },
-  },
-});
+import { defineStore } from 'pinia';
+import { Notification, NotificationOptions } from '../types';
+
+export const useNotificationsStore = defineStore('notifications', {
+  state: () => {
+    return {
+      count: 0,
+      notifications: [] as Notification[],
+      timeouts: {} as Record<number, number>,
+    };
+  },
+  actions: {
+    push(options: NotificationOptions) {
+      this.count++;
+
+      const id = this.count;
+
+      const notification = {
+        id: id,
+        color: options.color ?? 'info',
+        title: options.title,
+        text: options.text,
+        duration: options.duration ?? 3000,
+      };
+
+      this.notifications.push(notification);
+
+      this.timeouts[id] = setTimeout(() => {
+        this.remove(notification);
+      }, notification.duration);
+    },
+    remove(notification: Notification) {
+      this.notifications.splice(
+        this.notifications.findIndex((n) => n.id === notification.id),
+        1
+      );
+      clearTimeout(this.timeouts[notification.id]);
+    },
+    clear() {
+      this.notifications = [];
+      Object.values(this.timeouts).forEach((timeout) => {
+        clearTimeout(timeout);
+      });
+      this.timeouts = [];
+    },
+  },
+});

package/src/stores/systemAlerts.ts

@@ -1,32 +1,32 @@
-import { defineStore } from 'pinia';
-import { SystemAlert, SystemAlertOptions } from '../types';
-
-export const useSystemAlertStore = defineStore('systemAlerts', {
-  state: () => {
-    return {
-      count: 0,
-      systemAlerts: [] as SystemAlert[],
-    };
-  },
-  actions: {
-    push(systemAlert: SystemAlertOptions): string | number {
-      this.count++;
-      this.systemAlerts.push({
-        id: this.count,
-        color: systemAlert.color ?? 'info',
-        message: systemAlert.message,
-        to: systemAlert.to,
-        action: systemAlert.action,
-        closable: systemAlert.closable ?? false,
-      });
-
-      return this.count;
-    },
-    remove(alertId: number | string) {
-      this.systemAlerts = this.systemAlerts.filter((alert) => alert.id !== alertId);
-    },
-    clear() {
-      this.systemAlerts = [];
-    },
-  },
-});
+import { defineStore } from 'pinia';
+import { SystemAlert, SystemAlertOptions } from '../types';
+
+export const useSystemAlertStore = defineStore('systemAlerts', {
+  state: () => {
+    return {
+      count: 0,
+      systemAlerts: [] as SystemAlert[],
+    };
+  },
+  actions: {
+    push(systemAlert: SystemAlertOptions): string | number {
+      this.count++;
+      this.systemAlerts.push({
+        id: this.count,
+        color: systemAlert.color ?? 'info',
+        message: systemAlert.message,
+        to: systemAlert.to,
+        action: systemAlert.action,
+        closable: systemAlert.closable ?? false,
+      });
+
+      return this.count;
+    },
+    remove(alertId: number | string) {
+      this.systemAlerts = this.systemAlerts.filter((alert) => alert.id !== alertId);
+    },
+    clear() {
+      this.systemAlerts = [];
+    },
+  },
+});

package/src/stories/List.stories.js

@@ -1,132 +1,132 @@
-import BaseHeader from '../components/BaseHeader.vue';
-import BaseTabs from '../components/BaseTabs.vue';
-import BaseTabItem from '../components/BaseTabItem.vue';
-import BaseDataTable from '../components/BaseDataTable.vue';
-import BaseTableColumn from '../components/BaseTableColumn.vue';
-import BaseBoolean from '../components/BaseBoolean.vue';
-import BaseSelect from '../components/BaseSelect.vue';
-import BaseBadge from '../components/BaseBadge.vue';
-import BaseCounter from '../components/BaseCounter.vue';
-import BaseAppNotifications from '../components/BaseAppNotifications.vue';
-import BaseAppDialogs from '../components/BaseAppDialogs.vue';
-import BaseContainer from '../components/BaseContainer.vue';
-import { DateTime } from 'luxon';
-import { templateDataTable } from '../../.storybook/utils';
-
-export default {
-    title: 'Pages/List',
-    component: BaseDataTable,
-    parameters: {
-        layout: 'fullscreen',
-    },
-    argTypes: {
-        layout: {
-            control: { type: 'select' },
-            options: ['default', 'compact'],
-        },
-        size: {
-            control: { type: 'select' },
-            options: ['sm', 'md'],
-        }
-    },
-    args: {
-        url: 'https://effettandem.com/api/content/articles',
-        urlQuery: {
-            per_page: 10,
-        },
-        historyMode: false,
-        detailed: true,
-        searchable: true,
-        checkable: true,
-        layout: 'compact',
-        size: 'sm',
-        showUrl() {
-            return '/';
-        },
-        editUrl() {
-            return '/';
-        },
-        deleteUrl() {
-            return '/';
-        },
-        actions: [
-            {
-                label: 'Export',
-                icon: 'heroicons:arrow-down-tray',
-                action: () => alert('export!'),
-            },
-            { line: true },
-            {
-                label: 'Delete all',
-                icon: 'heroicons:trash',
-                action: () => alert('Delete All!'),
-                color: 'danger',
-            },
-        ],
-        checkableActions: [
-            {
-                label: 'Delete all',
-                action: () => {
-                    alert('delete!');
-                },
-            },
-        ],
-    },
-};
-
-const templateComponents = {
-    BaseHeader,
-    BaseTabs,
-    BaseTabItem,
-    BaseDataTable,
-    BaseTableColumn,
-    BaseBoolean,
-    BaseSelect,
-    BaseBadge,
-    BaseAppNotifications,
-    BaseAppDialogs,
-    BaseCounter,
-    BaseContainer,
-};
-
-const template = `
-<div class="bg-slate-100 py-6">
-<BaseContainer>
-    <BaseHeader
-        title="Articles"
-        :actions="[
-            {label: 'New article', icon: 'heroicons:plus', action: () => alert('new article!'), color: 'primary'},
-            {label: 'Export', icon: 'heroicons:arrow-down-tray', action: () => alert('export!')},
-            {label: 'Import', icon: 'heroicons:arrow-up-tray', action: () => alert('import!')},
-        ]"
-        :breadcrumbs="[{label: 'Home', to: '/'}, {label: 'Articles', to: '/articles'}]"
-        class="mb-1"
-    ></BaseHeader>
-
-    <BaseTabs class="mb-4" size="sm">
-        <BaseTabItem to="/">All</BaseTabItem>
-        <BaseTabItem to="/settings">Videos <BaseCounter :count="4"></BaseCounter></BaseTabItem>
-        <BaseTabItem to="/setup">Articles</BaseTabItem>
-    </BaseTabs>
-
-    ${templateDataTable}
-
-    <BaseAppNotifications></BaseAppNotifications>
-    <BaseAppDialogs></BaseAppDialogs>
-</BaseContainer>
-</div>
-`;
-
-const Template = (args) => ({
-    components: templateComponents,
-    template: template,
-    setup() {
-        function onCellClick(row) {
-            alert('Cell click: ' + row.id);
-        }
-
-        return { args, onCellClick, DateTime };
-    },
-});
-
-export const Demo = Template.bind({});
+import BaseHeader from '../components/BaseHeader.vue';
+import BaseTabs from '../components/BaseTabs.vue';
+import BaseTabItem from '../components/BaseTabItem.vue';
+import BaseDataTable from '../components/BaseDataTable.vue';
+import BaseTableColumn from '../components/BaseTableColumn.vue';
+import BaseBoolean from '../components/BaseBoolean.vue';
+import BaseSelect from '../components/BaseSelect.vue';
+import BaseBadge from '../components/BaseBadge.vue';
+import BaseCounter from '../components/BaseCounter.vue';
+import BaseAppNotifications from '../components/BaseAppNotifications.vue';
+import BaseAppDialogs from '../components/BaseAppDialogs.vue';
+import BaseContainer from '../components/BaseContainer.vue';
+import { DateTime } from 'luxon';
+import { templateDataTable } from '../../.storybook/utils';
+
+export default {
+    title: 'Pages/List',
+    component: BaseDataTable,
+    parameters: {
+        layout: 'fullscreen',
+    },
+    argTypes: {
+        layout: {
+            control: { type: 'select' },
+            options: ['default', 'compact'],
+        },
+        size: {
+            control: { type: 'select' },
+            options: ['sm', 'md'],
+        }
+    },
+    args: {
+        url: 'https://effettandem.com/api/content/articles',
+        urlQuery: {
+            per_page: 10,
+        },
+        historyMode: false,
+        detailed: true,
+        searchable: true,
+        checkable: true,
+        layout: 'compact',
+        size: 'sm',
+        showUrl() {
+            return '/';
+        },
+        editUrl() {
+            return '/';
+        },
+        deleteUrl() {
+            return '/';
+        },
+        actions: [
+            {
+                label: 'Export',
+                icon: 'heroicons:arrow-down-tray',
+                action: () => alert('export!'),
+            },
+            { line: true },
+            {
+                label: 'Delete all',
+                icon: 'heroicons:trash',
+                action: () => alert('Delete All!'),
+                color: 'danger',
+            },
+        ],
+        checkableActions: [
+            {
+                label: 'Delete all',
+                action: () => {
+                    alert('delete!');
+                },
+            },
+        ],
+    },
+};
+
+const templateComponents = {
+    BaseHeader,
+    BaseTabs,
+    BaseTabItem,
+    BaseDataTable,
+    BaseTableColumn,
+    BaseBoolean,
+    BaseSelect,
+    BaseBadge,
+    BaseAppNotifications,
+    BaseAppDialogs,
+    BaseCounter,
+    BaseContainer,
+};
+
+const template = `
+<div class="bg-slate-100 py-6">
+<BaseContainer>
+    <BaseHeader
+        title="Articles"
+        :actions="[
+            {label: 'New article', icon: 'heroicons:plus', action: () => alert('new article!'), color: 'primary'},
+            {label: 'Export', icon: 'heroicons:arrow-down-tray', action: () => alert('export!')},
+            {label: 'Import', icon: 'heroicons:arrow-up-tray', action: () => alert('import!')},
+        ]"
+        :breadcrumbs="[{label: 'Home', to: '/'}, {label: 'Articles', to: '/articles'}]"
+        class="mb-1"
+    ></BaseHeader>
+
+    <BaseTabs class="mb-4" size="sm">
+        <BaseTabItem to="/">All</BaseTabItem>
+        <BaseTabItem to="/settings">Videos <BaseCounter :count="4"></BaseCounter></BaseTabItem>
+        <BaseTabItem to="/setup">Articles</BaseTabItem>
+    </BaseTabs>
+
+    ${templateDataTable}
+
+    <BaseAppNotifications></BaseAppNotifications>
+    <BaseAppDialogs></BaseAppDialogs>
+</BaseContainer>
+</div>
+`;
+
+const Template = (args) => ({
+    components: templateComponents,
+    template: template,
+    setup() {
+        function onCellClick(row) {
+            alert('Cell click: ' + row.id);
+        }
+
+        return { args, onCellClick, DateTime };
+    },
+});
+
+export const Demo = Template.bind({});