quasar-ui-danx 0.0.43 → 0.0.45

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar-ui-danx",
-  "version": "0.0.43",
+  "version": "0.0.45",
   "author": "Dan <dan@flytedesk.com>",
   "description": "DanX Vue / Quasar component library",
   "license": "MIT",

package/src/components/ActionTable/ActionTable.vue

@@ -48,46 +48,17 @@
       </q-th>
     </template>
     <template #body-cell="rowProps">
-      <q-td :key="rowProps.key" :props="rowProps">
-        <component
-            :is="rowProps.col.onClick ? 'a' : 'div'"
-            class="flex items-center flex-nowrap"
-            :class="{'justify-end': rowProps.col.align === 'right', 'justify-center': rowProps.col.align === 'center', 'justify-start': rowProps.col.align === 'left'}"
-            :style="getColumnStyle(rowProps.col)"
-            @click="() => rowProps.col.onClick && rowProps.col.onClick(rowProps.row)"
-        >
-          <RenderVNode
-              v-if="rowProps.col.vnode"
-              :vnode="rowProps.col.vnode(rowProps.row)"
-          />
-          <RenderComponent
-              v-else-if="rowProps.col.component"
-              :params="[rowProps.row]"
-              :component="rowProps.col.component"
-          />
-          <div v-else-if="rowProps.col.fieldList">
-            <div v-for="field in rowProps.col.fieldList" :key="field">
-              {{ rowProps.row[field] }}
-            </div>
-          </div>
-          <div v-else>
-            <slot v-bind="{name: rowProps.col.name, row: rowProps.row, value: rowProps.value}">
-              {{ rowProps.value }}
-            </slot>
-          </div>
-          <div v-if="rowProps.col.actions" class="flex-grow flex justify-end pl-2">
-            <ActionMenu
-                :actions="rowProps.col.actions"
-                :target="rowProps.row"
-                :loading="isSavingRow(rowProps.row)"
-                @action="(action) => $emit('action', action, rowProps.row)"
-            />
-          </div>
-        </component>
-      </q-td>
+      <ActionTableColumn
+          :row-props="rowProps"
+          :settings="columnSettings[rowProps.col.name]"
+          :is-saving="isSavingRow(rowProps.row)"
+          @action="$emit('action', $event, rowProps.row)"
+      >
+        <slot />
+      </ActionTableColumn>
     </template>
     <template #bottom>
-      <ActionInputComponent />
+      <ActionVnode />
     </template>
   </q-table>
 </template>
@@ -97,8 +68,8 @@ import { ref } from 'vue';
 import { getItem, setItem } from '../../helpers';
 import { DragHandleIcon as RowResizeIcon } from '../../svg';
 import { HandleDraggable } from '../DragAndDrop';
-import { ActionInputComponent, mapSortBy, RenderComponent, RenderVNode } from '../index';
-import { ActionMenu, EmptyTableState, registerStickyScrolling, TableSummaryRow } from './index';
+import { ActionVnode, mapSortBy } from '../index';
+import { ActionTableColumn, EmptyTableState, registerStickyScrolling, TableSummaryRow } from './index';
 
 defineEmits(['action', 'update:quasar-pagination', 'update:selected-rows']);
 const props = defineProps({
@@ -147,19 +118,14 @@ registerStickyScrolling(actionTable);
 const COLUMN_SETTINGS_KEY = `column-settings-${props.name}`;
 const columnSettings = ref(getItem(COLUMN_SETTINGS_KEY) || {});
 function onResizeColumn(column, val) {
-  columnSettings.value[column.name] = Math.max(Math.min(val.distance + val.startDropZoneSize, column.maxWidth || 500), column.minWidth || 80);
+  columnSettings.value = {
+    ...columnSettings.value,
+    [column.name]: {
+      width: Math.max(Math.min(val.distance + val.startDropZoneSize, column.maxWidth || 500), column.minWidth || 80)
+    }
+  };
   setItem(COLUMN_SETTINGS_KEY, columnSettings.value);
 }
-function getColumnStyle(column) {
-  const width = columnSettings.value[column.name] || column.width;
-
-  if (width) {
-    return {
-      width: `${width}px`
-    };
-  }
-  return null;
-}
 
 function isSavingRow(row) {
   if (!props.isSavingTarget) return false;

package/src/components/ActionTable/ActionTableColumn.vue

@@ -0,0 +1,72 @@
+<template>
+  <q-td :key="rowProps.key" :props="rowProps" :style="columnStyle">
+    <div
+        class="flex items-center flex-nowrap"
+        :class="columnClass"
+    >
+      <a
+          v-if="column.onClick"
+          class="flex-grow"
+          @click="column.onClick(row)"
+      >
+        <RenderVnode
+            v-if="column.vnode"
+            :vnode="column.vnode(row)"
+        />
+        <slot v-else v-bind="{name: column.name, row, value}">
+          {{ value }}
+        </slot>
+      </a>
+      <div v-else class="flex-grow">
+        <RenderVnode
+            v-if="column.vnode"
+            :vnode="column.vnode(row)"
+        />
+        <slot v-else v-bind="{name: column.name, row, value}">
+          {{ value }}
+        </slot>
+      </div>
+      <div v-if="column.actions" class="flex flex-shrink-0 pl-2">
+        <ActionMenu
+            :actions="column.actions"
+            :target="row"
+            :loading="isSaving"
+            @action="$emit('action', $event)"
+        />
+      </div>
+    </div>
+  </q-td>
+</template>
+<script setup>
+import { computed } from 'vue';
+import { RenderVnode } from '../Utility';
+import { ActionMenu } from './index';
+
+defineEmits(['action']);
+const props = defineProps({
+  rowProps: {
+    type: Object,
+    required: true
+  },
+  settings: {
+    type: Object,
+    default: null
+  },
+  isSaving: Boolean
+});
+
+const row = computed(() => props.rowProps.row);
+const column = computed(() => props.rowProps.col);
+const value = computed(() => props.rowProps.value);
+
+const columnStyle = computed(() => {
+  const width = props.settings?.width || column.value.width;
+  return width ? { width: `${width}px` } : null;
+});
+
+const columnClass = computed(() => ({
+  'justify-end': column.value.align === 'right',
+  'justify-center': column.value.align === 'center',
+  'justify-start': column.value.align === 'left'
+}));
+</script>

package/src/components/ActionTable/index.ts

@@ -6,5 +6,6 @@ export * from "./listHelpers";
 export * from "./tableColumns";
 export { default as ActionMenu } from "./ActionMenu.vue";
 export { default as ActionTable } from "./ActionTable.vue";
+export { default as ActionTableColumn } from "./ActionTableColumn.vue";
 export { default as EmptyTableState } from "./EmptyTableState.vue";
 export { default as TableSummaryRow } from "./TableSummaryRow.vue";

package/src/components/AuditHistory/AuditHistoryItem.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="text-gray-shadow flex items-stretch flex-nowrap p-4">
+    <div class="flex-grow text-sm w-3/5 overflow-auto">
+      <h5>{{ change.label }} ({{ change.name }})</h5>
+      <div class="flex flex-nowrap items-center mt-4">
+        <div class="bg-red-light line-through p-2">
+          <AdHistoryItemValue
+              :type="change.type"
+              :value="change.oldValue"
+          />
+        </div>
+        <div class="bg-green-plus-4 ml-2.5 p-2">
+          <AdHistoryItemValue
+              :type="change.type"
+              :value="change.newValue"
+          />
+        </div>
+      </div>
+    </div>
+    <div class="ml-4 text-sm w-2/5">
+      <template v-if="item.user">
+        <div>{{ item.user.name }}</div>
+        <div>{{ item.user.email }}</div>
+      </template>
+      <div>{{ item.account }}</div>
+      <div>
+        <a v-if="item.audit_request_id" :href="novaUrl" target="_blank">{{ fLocalizedDateTime(item.timestamp) }}</a>
+        <template v-else>{{ fLocalizedDateTime(item.timestamp) }}</template>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import { computed } from 'vue';
+import { fLocalizedDateTime } from '../../helpers';
+import AdHistoryItemValue from './AuditHistoryItemValue';
+
+const props = defineProps({
+  item: {
+    type: Object,
+    required: true
+  },
+  change: {
+    type: Object,
+    required: true
+  },
+  novaUrl: {
+    type: String,
+    default: '/nova'
+  }
+});
+
+const novaUrl = computed(() => props.novaUrl + `/resources/audit-requests/${props.item.audit_request_id}`);
+</script>

package/src/components/AuditHistory/AuditHistoryItemValue.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="flex space-x-2">
+    <template v-if="type === 'SINGLE_FILE'">
+      <FilePreview
+          :image="value"
+          class="w-24"
+      />
+    </template>
+    <template v-else-if="type === 'MULTI_FILE'">
+      <FilePreview
+          v-for="file in value"
+          :key="'file-' + file.id"
+          :image="file"
+          class="w-24 mb-2"
+      />
+    </template>
+    <template v-else-if="type === 'WYSIWYG'">
+      <div v-html="value" />
+    </template>
+    <template v-else>
+      {{ format(value) }}
+    </template>
+  </div>
+</template>
+<script setup>
+import { fCurrency, fDate, fLocalizedDateTime, fNumber } from '../../helpers';
+import { FilePreview } from '../Utility';
+
+const props = defineProps({
+  type: {
+    type: String,
+    required: true
+  },
+  value: {
+    type: [Number, String, Array, Object, Boolean],
+    default: null
+  }
+});
+
+function format(value) {
+  if (value === null || value === '' || value === undefined) {
+    return '';
+  }
+
+  switch (props.type) {
+    case 'NUMBER':
+      return fNumber(value);
+    case 'CURRENCY':
+      return fCurrency(value);
+    case 'DATE':
+      return fDate(value);
+    case 'DATETIME':
+      return fLocalizedDateTime(value);
+    case 'BOOLEAN':
+      return value ? 'Yes' : 'No';
+  }
+
+  return value;
+}
+</script>

package/src/components/AuditHistory/index.ts

@@ -0,0 +1,2 @@
+export { default as AuditHistoryItem } from "./AuditHistoryItem.vue";
+export { default as AuditHistoryItemValue } from "./AuditHistoryItemValue.vue";

package/src/components/PanelsDrawer/PanelsDrawer.vue

@@ -0,0 +1,64 @@
+<template>
+  <ContentDrawer
+      position="right"
+      :show="true"
+      overlay
+      content-class="h-full"
+      title=""
+      @update:show="$emit('close')"
+  >
+    <div class="flex flex-col flex-nowrap h-full">
+      <div class="flex items-center px-6 py-4 border-b">
+        <div class="flex-grow">
+          <slot name="header" />
+        </div>
+
+        <div>
+          <QBtn @click="$emit('close')">
+            <CloseIcon class="w-4" />
+          </QBtn>
+        </div>
+      </div>
+      <div class="flex-grow overflow-hidden h-full">
+        <div class="flex items-stretch flex-nowrap h-full">
+          <div class="border-r w-[13.5em] overflow-y-auto">
+            <PanelsDrawerTabs
+                v-model="activePanel"
+                :panels="panels"
+                @update:model-value="$emit('update:model-value', $event)"
+            />
+          </div>
+          <PanelsDrawerPanels :panels="panels" :active-panel="activePanel" :class="panelsClass" />
+          <div v-if="$slots['right-sidebar']" class="border-l overflow-y-auto">
+            <slot name="right-sidebar" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </ContentDrawer>
+</template>
+<script setup>
+import { ref, watch } from 'vue';
+import { XIcon as CloseIcon } from '../../svg';
+import { ContentDrawer } from '../Utility';
+import { PanelsDrawerPanels, PanelsDrawerTabs } from './index';
+
+defineEmits(['update:model-value', 'close']);
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: null
+  },
+  panelsClass: {
+    type: [Object, String],
+    default: 'w-[35.5rem]'
+  },
+  panels: {
+    type: Array,
+    required: true
+  }
+});
+
+const activePanel = ref(props.modelValue);
+watch(() => props.modelValue, (value) => activePanel.value = value);
+</script>

package/src/components/PanelsDrawer/PanelsDrawerPanels.vue

@@ -0,0 +1,25 @@
+<template>
+  <QTabPanels
+    :model-value="activePanel"
+    class="overflow-y-auto bg-neutral-plus-7 h-full transition-all"
+  >
+    <QTabPanel v-for="panel in panels" :key="panel.name" :name="panel.name">
+      <RenderVnode v-if="panel.vnode" :vnode="panel.vnode" />
+    </QTabPanel>
+  </QTabPanels>
+</template>
+
+<script setup>
+import { RenderVnode } from "quasar-ui-danx";
+
+defineProps({
+  activePanel: {
+    type: String,
+    required: true
+  },
+  panels: {
+    type: Array,
+    required: true
+  }
+});
+</script>

package/src/components/PanelsDrawer/PanelsDrawerTabs.vue

@@ -0,0 +1,65 @@
+<template>
+  <QTabs
+    :model-value="modelValue"
+    vertical
+    align="left"
+    class="panel-tabs p-4 h-auto"
+    no-caps
+    @update:model-value="$emit('update:model-value', $event)"
+  >
+    <template v-for="panel in panels">
+      <template v-if="panel.enabled !== false">
+        <RenderVnode
+          v-if="panel.tabVnode"
+          :key="panel.name"
+          :vnode="panel.tabVnode"
+          :is-active="modelValue === panel.name"
+          :name="panel.name"
+          :label="panel.label"
+        />
+        <QTab v-else :key="panel.name" :name="panel.name" :label="panel.label" />
+      </template>
+    </template>
+  </QTabs>
+</template>
+<script setup>
+import { QTab } from "quasar";
+import { RenderVnode } from "quasar-ui-danx";
+
+defineEmits(["update:model-value"]);
+defineProps({
+  modelValue: {
+    type: String,
+    default: "general"
+  },
+  panels: {
+    type: Array,
+    required: true
+  }
+});
+</script>
+
+<style
+  lang="scss"
+  scoped
+>
+.panel-tabs {
+  :deep(.q-tab) {
+    justify-content: start !important;
+    padding: 0;
+    @apply text-left py-2.5 px-2 rounded-lg hover:bg-neutral-plus-6;
+
+    .q-focus-helper, .q-tab__indicator {
+      display: none;
+    }
+
+    .q-tab__content {
+      @apply p-0;
+    }
+  }
+
+  :deep(.q-tab.q-tab--active) {
+    @apply text-white bg-blue-base;
+  }
+}
+</style>

package/src/components/PanelsDrawer/index.ts

@@ -0,0 +1,3 @@
+export { default as PanelsDrawer } from "./PanelsDrawer.vue";
+export { default as PanelsDrawerPanels } from "./PanelsDrawerPanels.vue";
+export { default as PanelsDrawerTabs } from "./PanelsDrawerTabs.vue";

package/src/components/Utility/Controls/PreviousNextControls.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="previous-next-controls">
+    <QBtn
+        class="bg-neutral-plus-6 border-neutral-plus-4 border border-solid !rounded-r-none !p-2 !min-w-0"
+        :disable="isLoading"
+        :loading="isLoading"
+        @click="$emit('next', -1)"
+    >
+      <SkipPreviousIcon class="w-6" />
+    </QBtn>
+    <QBtn
+        class="bg-neutral-plus-6 border-neutral-plus-4 border border-solid border-l-0 !rounded-l-none !p-2 !min-w-0"
+        :disable="isLoading"
+        :loading="isLoading"
+        @click="$emit('next', 1)"
+    >
+      <SkipNextIcon class="w-6" />
+    </QBtn>
+  </div>
+</template>
+<script setup>
+import { SkipNextIcon, SkipPreviousIcon } from '../../../svg';
+
+defineEmits(['next']);
+defineProps({
+  isLoading: Boolean
+});
+</script>

package/src/components/Utility/Controls/index.ts

@@ -0,0 +1 @@
+export { default as PreviousNextControls } from "./PreviousNextControls.vue";

package/src/components/Utility/Formats/IconWithTextFormat.vue

@@ -2,7 +2,7 @@
   <div class="flex items-center">
     <component :is="icon" :class="iconClass" />
     <div :class="textClass">
-      <slot />
+      <slot>{{ text }}</slot>
     </div>
   </div>
 </template>
@@ -14,11 +14,15 @@ defineProps({
   },
   iconClass: {
     type: String,
-    default: "w-6"
+    default: 'w-6'
+  },
+  text: {
+    type: String,
+    default: null
   },
   textClass: {
     type: String,
-    default: "ml-2"
+    default: 'ml-2'
   }
 });
 </script>

package/src/components/Utility/Tabs/BadgeTab.vue

@@ -0,0 +1,32 @@
+<template>
+  <q-tab
+      :name="name"
+      class="w-full"
+      content-class="w-full"
+  >
+    <div class="flex items-center w-full">
+      <div class="flex-grow text-sm">{{ label }}</div>
+      <q-badge
+          color="gray-base"
+          :label="count"
+          rounded
+      />
+    </div>
+  </q-tab>
+</template>
+<script setup>
+defineProps({
+  name: {
+    type: String,
+    required: true
+  },
+  label: {
+    type: String,
+    required: true
+  },
+  count: {
+    type: [String, Number],
+    default: ''
+  }
+});
+</script>

package/src/components/Utility/Tabs/IndicatorTab.vue

@@ -0,0 +1,40 @@
+<template>
+  <q-tab
+      :name="name"
+      class="w-full"
+      content-class="w-full"
+  >
+    <div class="flex items-center w-full">
+      <div class="flex-grow text-sm">{{ label }}</div>
+      <div>
+        <OverdueIcon
+            v-if="overdue"
+            class="w-5 ml-2"
+            :class="isActive ? 'text-white' : 'text-red-danger'"
+        />
+        <WarningIcon
+            v-else-if="warning"
+            class="text-yellow-warning w-5"
+        />
+      </div>
+    </div>
+  </q-tab>
+</template>
+<script setup>
+import { ExclamationCircleIcon as OverdueIcon } from '@heroicons/vue/solid';
+import { WarningIcon } from '../../../svg';
+
+defineProps({
+  name: {
+    type: String,
+    required: true
+  },
+  label: {
+    type: String,
+    required: true
+  },
+  overdue: Boolean,
+  warning: Boolean,
+  isActive: Boolean
+});
+</script>

package/src/components/Utility/Tabs/index.ts

@@ -0,0 +1,2 @@
+export { default as BadgeTab } from "./BadgeTab.vue";
+export { default as IndicatorTab } from "./IndicatorTab.vue";

package/src/components/Utility/Tools/ActionVnode.vue

@@ -0,0 +1,23 @@
+<template>
+  <div>
+    <RenderVnode
+        v-if="activeActionVnode"
+        :vnode="activeActionVnode.vnode"
+        :is-saving="isSaving"
+        @confirm="onConfirm"
+        @close="activeActionVnode.cancel"
+    />
+  </div>
+</template>
+<script setup>
+import { ref } from 'vue';
+import { activeActionVnode } from '../../../helpers';
+import { RenderVnode } from './index';
+
+const isSaving = ref(false);
+async function onConfirm(input) {
+  isSaving.value = true;
+  await activeActionVnode.value.confirm(input);
+  isSaving.value = false;
+}
+</script>

package/src/components/Utility/Tools/RenderVnode.vue

@@ -0,0 +1,5 @@
+<script>
+const RenderVnode = (props) => props.vnode;
+RenderVnode.props = { vnode: { type: Object, required: true } };
+export default RenderVnode;
+</script>

package/src/components/Utility/Tools/index.ts

@@ -1,3 +1,3 @@
-export { default as ActionInputComponent } from "./ActionInputComponent.vue";
+export { default as ActionVnode } from "./ActionVnode.vue";
 export { default as RenderComponent } from "./RenderComponent.vue";
-export { default as RenderVNode } from "./RenderVNode.vue";
+export { default as RenderVnode } from "./RenderVnode.vue";

package/src/components/Utility/index.ts

@@ -1,8 +1,10 @@
 export * from "./Buttons";
+export * from "./Controls";
 export * from "./Dialogs";
 export * from "./Files";
 export * from "./Formats";
 export * from "./Layouts";
 export * from "./Popovers";
+export * from "./Tabs";
 export * from "./Tools";
 export * from "./Transitions";

package/src/components/index.ts

@@ -1,3 +1,5 @@
 export * from "./ActionTable";
-export * from "./Utility";
+export * from "./AuditHistory";
 export * from "./DragAndDrop";
+export * from "./PanelsDrawer";
+export * from "./Utility";

package/src/helpers/actions.ts

@@ -1,4 +1,4 @@
-import { shallowRef } from "vue";
+import { shallowRef, VNode } from "vue";
 import { FlashMessages } from "./index";
 
 interface ActionOptions {
@@ -8,7 +8,7 @@ interface ActionOptions {
     batch?: boolean;
     category?: string;
     class?: string;
-    inputComponent?: (target: object[] | object) => any;
+    vnode?: (target: object[] | object) => VNode;
     enabled?: (target: object) => boolean;
     batchEnabled?: (targets: object[]) => boolean;
     onAction?: (action: string | null, target: object, input: any) => Promise<any>;
@@ -18,7 +18,7 @@ interface ActionOptions {
     onFinish?: (action: string | null, targets: object, input: any) => any;
 }
 
-export const activeActionInput = shallowRef(null);
+export const activeActionVnode = shallowRef(null);
 
 /**
  * Hook to perform an action on a set of targets
@@ -98,25 +98,25 @@ export function useActions(actions: ActionOptions[], globalOptions: ActionOption
          */
         async performAction(name: string | object, target: object[] | object, input: any = null) {
             const action = resolveAction(name);
-            const component = action.inputComponent && action.inputComponent(target);
+            const vnode = action.vnode && action.vnode(target);
             let result = null;
 
             isSavingTarget.value = target;
 
-            // If no component input is required, we can directly perform the action
-            if (component) {
-                // If the action requires an input, we set the activeActionInput to the input component.
-                // This will tell the ActionInputComponent to render the input component, and confirm or cancel the
+            // If additional input is required, first render the vnode and wait for the confirm or cancel action
+            if (vnode) {
+                // If the action requires an input, we set the activeActionVnode to the input component.
+                // This will tell the ActionVnode to render the input component, and confirm or cancel the
                 // action The confirm function has the input from the component passed and will resolve the promise
                 // with the result of the action
                 result = await new Promise((resolve, reject) => {
-                    activeActionInput.value = {
-                        component,
+                    activeActionVnode.value = {
+                        vnode,
                         confirm: async input => {
                             const result = await onConfirmAction(action, target, input);
 
                             // Only resolve when we have a non-error response, so we can show the error message w/o
-                            // hiding the dialog / inputComponent
+                            // hiding the dialog / vnode
                             if (result === undefined || result === true || result?.success) {
                                 resolve(result);
                             }
@@ -125,7 +125,7 @@ export function useActions(actions: ActionOptions[], globalOptions: ActionOption
                     };
                 });
 
-                activeActionInput.value = null;
+                activeActionVnode.value = null;
             } else {
                 result = await onConfirmAction(action, target, input);
             }

package/src/svg/SkipNextIcon.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g>
+    <path d="M16.5 18V6H18.5V18H16.5ZM5.5 18V6L14.5 12L5.5 18Z" fill="currentColor"/>
+  </g>
+</svg>

package/src/svg/SkipPreviousIcon.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g>
+    <path d="M5.5 18V6H7.5V18H5.5ZM18.5 18L9.5 12L18.5 6V18Z" fill="currentColor"/>
+  </g>
+</svg>

package/src/svg/WarningIcon.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M0 18.2727L10 1L20 18.2727H0ZM3.13636 16.4545H16.8636L10 4.63636L3.13636 16.4545ZM10 15.5455C10.2576 15.5455 10.4736 15.4582 10.6482 15.2836C10.8221 15.1097 10.9091 14.8939 10.9091 14.6364C10.9091 14.3788 10.8221 14.163 10.6482 13.9891C10.4736 13.8145 10.2576 13.7273 10 13.7273C9.74242 13.7273 9.52667 13.8145 9.35273 13.9891C9.17818 14.163 9.09091 14.3788 9.09091 14.6364C9.09091 14.8939 9.17818 15.1097 9.35273 15.2836C9.52667 15.4582 9.74242 15.5455 10 15.5455ZM9.09091 12.8182H10.9091V8.27273H9.09091V12.8182Z"
+    fill="currentColor"/>
+</svg>

package/src/svg/index.ts

@@ -4,5 +4,8 @@ export { default as FilterIcon } from "./FilterIcon.svg";
 export { default as ImageIcon } from "./ImageIcon.svg";
 export { default as PdfIcon } from "./PdfIcon.svg";
 export { default as PercentIcon } from "./PercentIcon.svg";
+export { default as SkipNextIcon } from "./SkipNextIcon.svg";
+export { default as SkipPreviousIcon } from "./SkipPreviousIcon.svg";
 export { default as TrashIcon } from "./TrashIcon.svg";
+export { default as WarningIcon } from "./WarningIcon.svg";
 export { default as XIcon } from "./XIcon.svg";

package/src/components/Utility/Tools/ActionInputComponent.vue

@@ -1,23 +0,0 @@
-<template>
-  <div>
-    <RenderComponent
-        v-if="activeActionInput"
-        :component="activeActionInput.component"
-        :is-saving="isSaving"
-        @confirm="onConfirm"
-        @close="activeActionInput.cancel"
-    />
-  </div>
-</template>
-<script setup>
-import { ref } from 'vue';
-import { activeActionInput } from '../../../helpers';
-import RenderComponent from './RenderComponent';
-
-const isSaving = ref(false);
-async function onConfirm(input) {
-  isSaving.value = true;
-  await activeActionInput.value.confirm(input);
-  isSaving.value = false;
-}
-</script>

package/src/components/Utility/Tools/RenderVNode.vue

@@ -1,6 +0,0 @@
-<script>
-const RenderVNode = (props) => props.vnode;
-RenderVNode.props = { vnode: { type: Object, required: true } };
-RenderVNode.emits = ['action'];
-export default RenderVNode;
-</script>