sprintify-ui 0.0.75 → 0.0.77

package/dist/types/src/components/BaseDropdown.vue.d.ts

@@ -0,0 +1,96 @@
+import { Placement } from '@popperjs/core';
+import { PropType } from 'vue';
+declare const _default: {
+    new (...args: any[]): {
+        $: import("vue").ComponentInternalInstance;
+        $data: {};
+        $props: Partial<{
+            placement: Placement;
+            offset: [number, number];
+        }> & Omit<Readonly<import("vue").ExtractPropTypes<{
+            placement: {
+                type: PropType<Placement>;
+                default(): "bottom";
+            };
+            offset: {
+                default(): number[];
+                type: PropType<[number, number]>;
+            };
+        }>> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "placement" | "offset">;
+        $attrs: {
+            [x: string]: unknown;
+        };
+        $refs: {
+            [x: string]: unknown;
+        };
+        $slots: Readonly<{
+            [name: string]: import("vue").Slot | undefined;
+        }>;
+        $root: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null;
+        $parent: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null;
+        $emit: (event: string, ...args: any[]) => void;
+        $el: any;
+        $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+            placement: {
+                type: PropType<Placement>;
+                default(): "bottom";
+            };
+            offset: {
+                default(): number[];
+                type: PropType<[number, number]>;
+            };
+        }>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
+            placement: Placement;
+            offset: [number, number];
+        }, {}, string> & {
+            beforeCreate?: ((() => void) | (() => void)[]) | undefined;
+            created?: ((() => void) | (() => void)[]) | undefined;
+            beforeMount?: ((() => void) | (() => void)[]) | undefined;
+            mounted?: ((() => void) | (() => void)[]) | undefined;
+            beforeUpdate?: ((() => void) | (() => void)[]) | undefined;
+            updated?: ((() => void) | (() => void)[]) | undefined;
+            activated?: ((() => void) | (() => void)[]) | undefined;
+            deactivated?: ((() => void) | (() => void)[]) | undefined;
+            beforeDestroy?: ((() => void) | (() => void)[]) | undefined;
+            beforeUnmount?: ((() => void) | (() => void)[]) | undefined;
+            destroyed?: ((() => void) | (() => void)[]) | undefined;
+            unmounted?: ((() => void) | (() => void)[]) | undefined;
+            renderTracked?: (((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[]) | undefined;
+            renderTriggered?: (((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[]) | undefined;
+            errorCaptured?: (((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null, info: string) => boolean | void)[]) | undefined;
+        };
+        $forceUpdate: () => void;
+        $nextTick: typeof import("vue").nextTick;
+        $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (args_0: R, args_1: R) => any : (...args: any) => any, options?: import("vue").WatchOptions<boolean> | undefined): import("vue").WatchStopHandle;
+    } & Readonly<import("vue").ExtractPropTypes<{
+        placement: {
+            type: PropType<Placement>;
+            default(): "bottom";
+        };
+        offset: {
+            default(): number[];
+            type: PropType<[number, number]>;
+        };
+    }>> & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {};
+    __isFragment?: undefined;
+    __isTeleport?: undefined;
+    __isSuspense?: undefined;
+} & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+    placement: {
+        type: PropType<Placement>;
+        default(): "bottom";
+    };
+    offset: {
+        default(): number[];
+        type: PropType<[number, number]>;
+    };
+}>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
+    placement: Placement;
+    offset: [number, number];
+}, {}, string> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+    $slots: {
+        button: (_: {}) => any;
+        dropdown: (_: {}) => any;
+    };
+});
+export default _default;

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

@@ -116,6 +116,7 @@ declare const _default: {
         }) => any;
         item: (_: {
             item: MenuItemInterface;
+            active: any;
         }) => any;
     };
 });

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

@@ -26,6 +26,7 @@ import BaseDateSelect from './BaseDateSelect.vue';
 import BaseDescriptionList from './BaseDescriptionList.vue';
 import BaseDescriptionListItem from './BaseDescriptionListItem.vue';
 import BaseDialog from './BaseDialog.vue';
+import BaseDropdown from './BaseDropdown.vue';
 import BaseField from './BaseField.vue';
 import BaseFieldI18n from './BaseFieldI18n.vue';
 import BaseFilePicker from './BaseFilePicker.vue';
@@ -74,4 +75,4 @@ import BaseLayoutStacked from './BaseLayoutStacked.vue';
 import BaseLayoutStackedConfigurable from './BaseLayoutStackedConfigurable.vue';
 import BaseLayoutSidebar from './BaseLayoutSidebar.vue';
 import BaseLayoutSidebarConfigurable from './BaseLayoutSidebarConfigurable.vue';
-export { BaseActionItem, BaseAlert, BaseApp, BaseAppDialogs, BaseAppNotifications, BaseAutocomplete, BaseAutocompleteFetch, BaseAvatar, BaseAvatarGroup, BaseBadge, BaseBelongsTo, BaseBoolean, BaseBreadcrumbs, BaseButton, BaseButtonGroup, BaseCard, BaseCardRow, BaseCharacterCounter, BaseClipboard, BaseContainer, BaseCounter, BaseDataIterator, BaseDataTable, BaseDatePicker, BaseDateSelect, BaseDescriptionList, BaseDescriptionListItem, BaseDialog, BaseField, BaseFieldI18n, BaseFilePicker, BaseFileUploader, BaseForm, BaseHasMany, BaseIcon, BaseInput, BaseInputLabel, BaseLoadingCover, BaseMediaItem, BaseMediaLibrary, BaseMediaPreview, BaseMenu, BaseMenuItem, BaseModalCenter, BaseModalSide, BaseNavbar, BaseNavbarItem, BaseNavbarItemContent, BasePagination, BasePanel, BasePassword, BaseProgressCircle, BaseRadioGroup, BaseReadMore, BaseSelect, BaseShortcut, BaseSideNavigation, BaseSideNavigationItem, BaseSkeleton, BaseStatistic, BaseSwitch, BaseSystemAlert, BaseTabs, BaseTabItem, BaseTagAutocomplete, BaseTagAutocompleteFetch, BaseTable, BaseTableColumn, BaseTextarea, BaseTextareaAutoresize, BaseTimeline, BaseTimelineItem, BaseLayoutStacked, BaseLayoutStackedConfigurable, BaseLayoutSidebar, BaseLayoutSidebarConfigurable, };
+export { BaseActionItem, BaseAlert, BaseApp, BaseAppDialogs, BaseAppNotifications, BaseAutocomplete, BaseAutocompleteFetch, BaseAvatar, BaseAvatarGroup, BaseBadge, BaseBelongsTo, BaseBoolean, BaseBreadcrumbs, BaseButton, BaseButtonGroup, BaseCard, BaseCardRow, BaseCharacterCounter, BaseClipboard, BaseContainer, BaseCounter, BaseDataIterator, BaseDataTable, BaseDatePicker, BaseDateSelect, BaseDescriptionList, BaseDescriptionListItem, BaseDialog, BaseDropdown, BaseField, BaseFieldI18n, BaseFilePicker, BaseFileUploader, BaseForm, BaseHasMany, BaseIcon, BaseInput, BaseInputLabel, BaseLoadingCover, BaseMediaItem, BaseMediaLibrary, BaseMediaPreview, BaseMenu, BaseMenuItem, BaseModalCenter, BaseModalSide, BaseNavbar, BaseNavbarItem, BaseNavbarItemContent, BasePagination, BasePanel, BasePassword, BaseProgressCircle, BaseRadioGroup, BaseReadMore, BaseSelect, BaseShortcut, BaseSideNavigation, BaseSideNavigationItem, BaseSkeleton, BaseStatistic, BaseSwitch, BaseSystemAlert, BaseTabs, BaseTabItem, BaseTagAutocomplete, BaseTagAutocompleteFetch, BaseTable, BaseTableColumn, BaseTextarea, BaseTextareaAutoresize, BaseTimeline, BaseTimelineItem, BaseLayoutStacked, BaseLayoutStackedConfigurable, BaseLayoutSidebar, BaseLayoutSidebarConfigurable, };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.0.75",
+  "version": "0.0.77",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",
     "build-fast": "rimraf dist && vite build",
@@ -12,6 +12,7 @@
     "prepack": "npm run build"
   },
   "peerDependencies": {
+    "@popperjs/core": "^2.11.6",
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tailwindcss/forms": "^0.5.3",
     "@tailwindcss/line-clamp": "^0.4.2",
@@ -37,6 +38,7 @@
   "devDependencies": {
     "@babel/core": "^7.20.2",
     "@iconify/vue": "^4.0.0",
+    "@popperjs/core": "^2.11.6",
     "@storybook/addon-actions": "^6.5.13",
     "@storybook/addon-essentials": "^6.5.13",
     "@storybook/addon-interactions": "^6.5.13",

package/src/components/BaseDropdown.stories.js

@@ -0,0 +1,36 @@
+import BaseDropdown from './BaseDropdown.vue';
+
+export default {
+  title: 'Components/BaseDropdown',
+  component: BaseDropdown,
+  args: {
+    placement: 'top-start',
+    offset: [0, 8],
+  },
+};
+
+const Template = (args) => ({
+  components: { BaseDropdown },
+  setup() {
+    return { args };
+  },
+  template: `
+  <div style="height: 2000px">
+    <BaseDropdown v-bind="args" style="margin-top: 200px;">
+      <template #button>
+        <div class="btn btn-primary">Click me</div>
+      </template>
+      <template #dropdown>
+        <div class="bg-white shadow py-1 px-1 rounded">
+          <button type="button" class="block text-sm px-4 py-1.5">Item 1</button>
+          <button type="button" class="block text-sm px-4 py-1.5">Item 2</button>
+          <button type="button" class="block text-sm px-4 py-1.5">Item 3</button>
+        </div>
+      </template>
+    </BaseDropdown>
+  </div>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {};

package/src/components/BaseDropdown.vue

@@ -0,0 +1,51 @@
+<template>
+  <div>
+    <button ref="button" type="button" @click="showDropdown = !showDropdown">
+      <slot name="button"></slot>
+    </button>
+    <div v-show="showDropdown" ref="dropdown">
+      <slot name="dropdown"></slot>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { bottom, createPopper, Placement } from '@popperjs/core';
+import { PropType } from 'vue';
+
+const button = ref<HTMLElement | null>(null);
+const dropdown = ref<HTMLElement | null>(null);
+
+const showDropdown = ref(false);
+
+const props = defineProps({
+  placement: {
+    type: String as PropType<Placement>,
+    default() {
+      return bottom;
+    },
+  },
+  offset: {
+    default() {
+      return [0, 8];
+    },
+    type: Array as unknown as PropType<[number, number]>,
+  },
+});
+
+onMounted(() => {
+  if (button.value && dropdown.value) {
+    createPopper(button.value, dropdown.value, {
+      placement: props.placement,
+      modifiers: [
+        {
+          name: 'offset',
+          options: {
+            offset: props.offset,
+          },
+        },
+      ],
+    });
+  }
+});
+</script>

package/src/components/BaseMenu.vue

@@ -76,7 +76,7 @@
               class="w-full"
               @click="item.action"
             >
-              <slot name="item" :item="item">
+              <slot name="item" :item="item" :active="active">
                 <BaseMenuItem
                   :label="item.label"
                   :count="item.count"

package/src/components/index.ts

@@ -26,6 +26,7 @@ import BaseDateSelect from './BaseDateSelect.vue';
 import BaseDescriptionList from './BaseDescriptionList.vue';
 import BaseDescriptionListItem from './BaseDescriptionListItem.vue';
 import BaseDialog from './BaseDialog.vue';
+import BaseDropdown from './BaseDropdown.vue';
 import BaseField from './BaseField.vue';
 import BaseFieldI18n from './BaseFieldI18n.vue';
 import BaseFilePicker from './BaseFilePicker.vue';
@@ -105,6 +106,7 @@ export {
   BaseDescriptionList,
   BaseDescriptionListItem,
   BaseDialog,
+  BaseDropdown,
   BaseField,
   BaseFieldI18n,
   BaseFilePicker,