sprintify-ui 0.0.11 → 0.0.13

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

@@ -9,8 +9,8 @@ declare const _default: {
             inputClass: string;
             placeholder: string;
             disabled: boolean;
+            queryKey: string;
             max: number;
-            min: number;
         }> & Omit<Readonly<import("vue").ExtractPropTypes<{
             modelValue: {
                 required: true;
@@ -44,20 +44,20 @@ declare const _default: {
                 default: boolean;
                 type: BooleanConstructor;
             };
-            min: {
-                default: undefined;
-                type: NumberConstructor;
-            };
             max: {
                 default: undefined;
                 type: NumberConstructor;
             };
+            queryKey: {
+                default: string;
+                type: StringConstructor;
+            };
         }>> & {
             onFocus?: ((...args: any[]) => any) | undefined;
             "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
             onTyping?: ((...args: any[]) => any) | undefined;
             onScrollBottom?: ((...args: any[]) => any) | undefined;
-        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "required" | "inputClass" | "placeholder" | "disabled" | "max" | "min">;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "required" | "inputClass" | "placeholder" | "disabled" | "queryKey" | "max">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -104,14 +104,14 @@ declare const _default: {
                 default: boolean;
                 type: BooleanConstructor;
             };
-            min: {
-                default: undefined;
-                type: NumberConstructor;
-            };
             max: {
                 default: undefined;
                 type: NumberConstructor;
             };
+            queryKey: {
+                default: string;
+                type: StringConstructor;
+            };
         }>> & {
             onFocus?: ((...args: any[]) => any) | undefined;
             "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
@@ -122,8 +122,8 @@ declare const _default: {
             inputClass: string;
             placeholder: string;
             disabled: boolean;
+            queryKey: string;
             max: number;
-            min: number;
         }, {}, string> & {
             beforeCreate?: ((() => void) | (() => void)[]) | undefined;
             created?: ((() => void) | (() => void)[]) | undefined;
@@ -177,14 +177,14 @@ declare const _default: {
             default: boolean;
             type: BooleanConstructor;
         };
-        min: {
-            default: undefined;
-            type: NumberConstructor;
-        };
         max: {
             default: undefined;
             type: NumberConstructor;
         };
+        queryKey: {
+            default: string;
+            type: StringConstructor;
+        };
     }>> & {
         onFocus?: ((...args: any[]) => any) | undefined;
         "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
@@ -227,14 +227,14 @@ declare const _default: {
         default: boolean;
         type: BooleanConstructor;
     };
-    min: {
-        default: undefined;
-        type: NumberConstructor;
-    };
     max: {
         default: undefined;
         type: NumberConstructor;
     };
+    queryKey: {
+        default: string;
+        type: StringConstructor;
+    };
 }>> & {
     onFocus?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
@@ -245,7 +245,23 @@ declare const _default: {
     inputClass: string;
     placeholder: string;
     disabled: boolean;
+    queryKey: string;
     max: number;
-    min: number;
-}, {}, string> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
+}, {}, string> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+    $slots: {
+        option: (_: {
+            option: Option;
+            selected: boolean;
+            active: boolean;
+        }) => any;
+        footer: (_: {
+            options: import("@/types/types").NormalizedOption[];
+        } & {
+            keywords: string;
+        }) => any;
+        empty: (_: {
+            firstSearch: boolean;
+        }) => any;
+    };
+});
 export default _default;

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

@@ -1,4 +1,160 @@
-declare const _default: import("vue").DefineComponent<{
+declare const _default: {
+    new (...args: any[]): {
+        $: import("vue").ComponentInternalInstance;
+        $data: {};
+        $props: Partial<{
+            modelValue: string;
+            placeholder: string;
+            disabled: boolean;
+            maxHeight: number;
+            submitOnEnter: boolean;
+        }> & Omit<Readonly<import("vue").ExtractPropTypes<{
+            modelValue: {
+                default: string;
+                type: StringConstructor;
+            };
+            placeholder: {
+                default: string;
+                type: StringConstructor;
+            };
+            name: {
+                required: true;
+                type: StringConstructor;
+            };
+            maxHeight: {
+                default: number;
+                type: NumberConstructor;
+            };
+            /**
+             * Setting this to true will trigger the 'submit' event while pressing Enter.
+             * Users will be able to add a line break while pressing Shift + Enter.
+             */
+            submitOnEnter: {
+                default: boolean;
+                type: BooleanConstructor;
+            };
+            disabled: {
+                default: boolean;
+                type: BooleanConstructor;
+            };
+        }>> & {
+            onFocus?: ((...args: any[]) => any) | undefined;
+            onInput?: ((...args: any[]) => any) | undefined;
+            onSubmit?: ((...args: any[]) => any) | undefined;
+            "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "modelValue" | "placeholder" | "disabled" | "maxHeight" | "submitOnEnter">;
+        $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: "input" | "submit" | "update:modelValue" | "focus", ...args: any[]) => void;
+        $el: any;
+        $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+            modelValue: {
+                default: string;
+                type: StringConstructor;
+            };
+            placeholder: {
+                default: string;
+                type: StringConstructor;
+            };
+            name: {
+                required: true;
+                type: StringConstructor;
+            };
+            maxHeight: {
+                default: number;
+                type: NumberConstructor;
+            };
+            /**
+             * Setting this to true will trigger the 'submit' event while pressing Enter.
+             * Users will be able to add a line break while pressing Shift + Enter.
+             */
+            submitOnEnter: {
+                default: boolean;
+                type: BooleanConstructor;
+            };
+            disabled: {
+                default: boolean;
+                type: BooleanConstructor;
+            };
+        }>> & {
+            onFocus?: ((...args: any[]) => any) | undefined;
+            onInput?: ((...args: any[]) => any) | undefined;
+            onSubmit?: ((...args: any[]) => any) | undefined;
+            "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+        }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("input" | "submit" | "update:modelValue" | "focus")[], string, {
+            modelValue: string;
+            placeholder: string;
+            disabled: boolean;
+            maxHeight: number;
+            submitOnEnter: boolean;
+        }, {}, 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<{
+        modelValue: {
+            default: string;
+            type: StringConstructor;
+        };
+        placeholder: {
+            default: string;
+            type: StringConstructor;
+        };
+        name: {
+            required: true;
+            type: StringConstructor;
+        };
+        maxHeight: {
+            default: number;
+            type: NumberConstructor;
+        };
+        /**
+         * Setting this to true will trigger the 'submit' event while pressing Enter.
+         * Users will be able to add a line break while pressing Shift + Enter.
+         */
+        submitOnEnter: {
+            default: boolean;
+            type: BooleanConstructor;
+        };
+        disabled: {
+            default: boolean;
+            type: BooleanConstructor;
+        };
+    }>> & {
+        onFocus?: ((...args: any[]) => any) | undefined;
+        onInput?: ((...args: any[]) => any) | undefined;
+        onSubmit?: ((...args: any[]) => any) | undefined;
+        "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    } & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {};
+    __isFragment?: undefined;
+    __isTeleport?: undefined;
+    __isSuspense?: undefined;
+} & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         default: string;
         type: StringConstructor;
@@ -11,34 +167,32 @@ declare const _default: import("vue").DefineComponent<{
         required: true;
         type: StringConstructor;
     };
-}, {
-    mobile: boolean;
-}, unknown, {}, {
-    onInput(e: any): void;
-    updateReplicatedValue(value: string): void;
-    onKeyDown(event: any): void;
-    onKeyUp(event: any): void;
-    onFocus(event: any): void;
-}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("input" | "submit" | "update:modelValue" | "focus")[], "input" | "submit" | "update:modelValue" | "focus", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    modelValue: {
-        default: string;
-        type: StringConstructor;
+    maxHeight: {
+        default: number;
+        type: NumberConstructor;
     };
-    placeholder: {
-        default: string;
-        type: StringConstructor;
+    /**
+     * Setting this to true will trigger the 'submit' event while pressing Enter.
+     * Users will be able to add a line break while pressing Shift + Enter.
+     */
+    submitOnEnter: {
+        default: boolean;
+        type: BooleanConstructor;
     };
-    name: {
-        required: true;
-        type: StringConstructor;
+    disabled: {
+        default: boolean;
+        type: BooleanConstructor;
     };
 }>> & {
     onFocus?: ((...args: any[]) => any) | undefined;
     onInput?: ((...args: any[]) => any) | undefined;
     onSubmit?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-}, {
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("input" | "submit" | "update:modelValue" | "focus")[], "input" | "submit" | "update:modelValue" | "focus", {
     modelValue: string;
     placeholder: string;
-}>;
+    disabled: boolean;
+    maxHeight: number;
+    submitOnEnter: boolean;
+}, {}, string> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
 export default _default;

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

@@ -12,6 +12,7 @@ import BaseBreadcrumbs from './BaseBreadcrumbs.vue';
 import BaseButton from './BaseButton.vue';
 import BaseCard from './BaseCard.vue';
 import BaseCardRow from './BaseCardRow.vue';
+import BaseCharacterCounter from './BaseCharacterCounter.vue';
 import BaseClipboard from './BaseClipboard.vue';
 import BaseContainer from './BaseContainer.vue';
 import BaseCounter from './BaseCounter.vue';
@@ -24,10 +25,38 @@ import BaseDescriptionListItem from './BaseDescriptionListItem.vue';
 import BaseDialog from './BaseDialog.vue';
 import BaseFilePicker from './BaseFilePicker.vue';
 import BaseFileUploader from './BaseFileUploader.vue';
+import BaseHasMany from './BaseHasMany.vue';
 import { Icon as BaseIcon } from '@iconify/vue';
+import BaseInput from './BaseInput.vue';
+import BaseInputLabel from './BaseInputLabel.vue';
 import BaseLoadingCover from './BaseLoadingCover.vue';
+import BaseMediaItem from './BaseMediaItem.vue';
+import BaseMediaLibrary from './BaseMediaLibrary.vue';
+import BaseMediaPreview from './BaseMediaPreview.vue';
 import BaseMenu from './BaseMenu.vue';
 import BaseMenuItem from './BaseMenuItem.vue';
+import BaseModalCenter from './BaseModalCenter.vue';
+import BaseModalSide from './BaseModalSide.vue';
+import BaseNavbar from './BaseNavbar.vue';
+import BaseNavbarItem from './BaseNavbarItem.vue';
+import BaseNavbarItemContent from './BaseNavbarItemContent.vue';
+import BasePagination from './BasePagination.vue';
+import BasePanel from './BasePanel.vue';
+import BasePassword from './BasePassword.vue';
+import BaseProcessRing from './BaseProcessRing.vue';
+import BaseReadMore from './BaseReadMore.vue';
+import BaseSelect from './BaseSelect.vue';
+import BaseSideNavigation from './BaseSideNavigation.vue';
+import BaseSideNavigationItem from './BaseSideNavigationItem.vue';
+import BaseSkeleton from './BaseSkeleton.vue';
+import BaseSwitch from './BaseSwitch.vue';
+import BaseSystemAlert from './BaseSystemAlert.vue';
+import BaseTabs from './BaseTabs.vue';
+import BaseTabItem from './BaseTabItem.vue';
+import BaseTagAutocomplete from './BaseTagAutocomplete.vue';
+import BaseTagAutocompleteFetch from './BaseTagAutocompleteFetch.vue';
 import BaseTable from './BaseTable.vue';
 import BaseTableColumn from './BaseTableColumn.vue';
-export { BaseAlert, BaseApp, BaseAppDialogs, BaseAppNotifications, BaseAutocomplete, BaseAutocompleteFetch, BaseAvatar, BaseBadge, BaseBelongsTo, BaseBoolean, BaseBreadcrumbs, BaseButton, BaseCard, BaseCardRow, BaseClipboard, BaseContainer, BaseCounter, BaseDataIterator, BaseDataTable, BaseDatePicker, BaseDateSelect, BaseDescriptionList, BaseDescriptionListItem, BaseDialog, BaseFilePicker, BaseFileUploader, BaseIcon, BaseLoadingCover, BaseMenu, BaseMenuItem, BaseTable, BaseTableColumn, };
+import BaseTextarea from './BaseTextarea.vue';
+import BaseTextareaAutoresize from './BaseTextareaAutoresize.vue';
+export { BaseAlert, BaseApp, BaseAppDialogs, BaseAppNotifications, BaseAutocomplete, BaseAutocompleteFetch, BaseAvatar, BaseBadge, BaseBelongsTo, BaseBoolean, BaseBreadcrumbs, BaseButton, BaseCard, BaseCardRow, BaseCharacterCounter, BaseClipboard, BaseContainer, BaseCounter, BaseDataIterator, BaseDataTable, BaseDatePicker, BaseDateSelect, BaseDescriptionList, BaseDescriptionListItem, BaseDialog, BaseFilePicker, BaseFileUploader, BaseHasMany, BaseIcon, BaseInput, BaseInputLabel, BaseLoadingCover, BaseMediaItem, BaseMediaLibrary, BaseMediaPreview, BaseMenu, BaseMenuItem, BaseModalCenter, BaseModalSide, BaseNavbar, BaseNavbarItem, BaseNavbarItemContent, BasePagination, BasePanel, BasePassword, BaseProcessRing, BaseReadMore, BaseSelect, BaseSideNavigation, BaseSideNavigationItem, BaseSkeleton, BaseSwitch, BaseSystemAlert, BaseTabs, BaseTabItem, BaseTagAutocomplete, BaseTagAutocompleteFetch, BaseTable, BaseTableColumn, BaseTextarea, BaseTextareaAutoresize, };

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

@@ -30,6 +30,7 @@ declare const messages: {
             month: string;
             next: string;
             next_month: string;
+            none: string;
             nothing_found: string;
             or: string;
             pagination_detail: string;
@@ -87,6 +88,7 @@ declare const messages: {
             month: string;
             next: string;
             next_month: string;
+            none: string;
             nothing_found: string;
             or: string;
             pagination_detail: string;
@@ -155,6 +157,7 @@ declare const config: {
                 month: string;
                 next: string;
                 next_month: string;
+                none: string;
                 nothing_found: string;
                 or: string;
                 pagination_detail: string;
@@ -212,6 +215,7 @@ declare const config: {
                 month: string;
                 next: string;
                 next_month: string;
+                none: string;
                 nothing_found: string;
                 or: string;
                 pagination_detail: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.0.11",
+  "version": "0.0.13",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",
     "docs:dev": "vitepress dev docs",

package/src/components/BaseAppDialogs.vue

@@ -11,7 +11,7 @@
     >
       <div
         v-if="dialogs.length"
-        class="fixed inset-0 z-20 h-full w-full bg-black bg-opacity-60"
+        class="z-dialogs fixed inset-0 h-full w-full bg-black bg-opacity-60"
       />
     </Transition>
 
@@ -29,7 +29,7 @@
         v-for="dialog in dialogs"
         :key="dialog.id"
         scroll-lock-target
-        class="fixed inset-0 z-20 transform overflow-y-auto"
+        class="z-dialogs fixed inset-0 transform overflow-y-auto"
       >
         <div
           class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0"

package/src/components/BaseAppNotifications.vue

@@ -1,7 +1,7 @@
 <template>
   <Teleport to="body">
     <div
-      class="pointer-events-none fixed inset-0 flex items-end justify-end p-6 md:p-8"
+      class="pointer-events-none fixed inset-0 z-notifications flex items-end justify-end p-6 md:p-8"
     >
       <div class="w-full max-w-sm">
         <TransitionGroup

package/src/components/BaseAutocomplete.vue

@@ -48,7 +48,7 @@
     <div class="relative">
       <div
         v-show="showDropdown"
-        class="absolute top-1 z-[1] min-h-[110px] w-full overflow-hidden rounded border border-slate-300 bg-white shadow-md"
+        class="absolute top-1 z-menu min-h-[110px] w-full overflow-hidden rounded border border-slate-300 bg-white shadow-md"
       >
         <div
           ref="dropdown"
@@ -102,24 +102,22 @@
           </div>
         </div>
 
-        <Transition>
-          <div
-            v-if="loading"
-            class="absolute inset-0 h-full w-full space-y-1 bg-white p-2"
-          >
-            <div class="space-y-1">
-              <BaseSkeleton class="h-7 w-full" delay="0ms"></BaseSkeleton>
-              <BaseSkeleton
-                class="h-7 w-full opacity-70"
-                delay="50ms"
-              ></BaseSkeleton>
-              <BaseSkeleton
-                class="h-7 w-full opacity-30"
-                delay="100ms"
-              ></BaseSkeleton>
-            </div>
+        <div
+          v-if="loading"
+          class="absolute inset-0 h-full w-full space-y-1 bg-white p-2"
+        >
+          <div class="space-y-1">
+            <BaseSkeleton class="h-7 w-full" delay="0ms"></BaseSkeleton>
+            <BaseSkeleton
+              class="h-7 w-full opacity-70"
+              delay="50ms"
+            ></BaseSkeleton>
+            <BaseSkeleton
+              class="h-7 w-full opacity-30"
+              delay="100ms"
+            ></BaseSkeleton>
           </div>
-        </Transition>
+        </div>
       </div>
     </div>
   </div>

package/src/components/BaseBelongsTo.vue

@@ -111,6 +111,7 @@ watch(
   },
   { immediate: true }
 );
+
 function onUpdate(newModel: Selection) {
   if (!newModel) {
     model.value = null;

package/src/components/BaseCharacterCounter.stories.js

@@ -0,0 +1,30 @@
+import BaseCharacterCounter from './BaseCharacterCounter.vue';
+import BaseInput from './BaseInput.vue';
+
+export default {
+  title: 'Components/BaseCharacterCounter',
+  component: BaseCharacterCounter,
+  args: {
+    text: 'Test',
+    max: 100,
+    min: 10,
+  },
+};
+
+const Template = (args) => ({
+  components: {
+    BaseCharacterCounter,
+    BaseInput,
+  },
+  setup() {
+    const text = ref('bla bla');
+    return { args, text };
+  },
+  template: `
+    <BaseInput v-model="text" name="test" class="w-full mb-1"></BaseInput>
+    <BaseCharacterCounter v-bind="args" :text="text" class="text-xs text-slate-500"></BaseCharacterCounter>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {};

package/src/components/BaseCharacterCounter.vue

@@ -0,0 +1,60 @@
+<template>
+  <div>
+    <div
+      v-if="max && (!min || length >= min)"
+      :class="{
+        'text-red-600': length > max,
+      }"
+    >
+      {{ length }}/{{ max }}
+    </div>
+    <div v-else-if="min && length < min" class="text-red-600">
+      {{ $t('sui.min_x_characters', { x: min }) }} ({{ length }}/{{ min }})
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { trim } from 'lodash';
+
+const props = defineProps({
+  text: {
+    required: true,
+    type: String,
+  },
+  min: {
+    default: undefined,
+    type: Number,
+  },
+  max: {
+    default: undefined,
+    type: Number,
+  },
+  trim: {
+    default: true,
+    type: Boolean,
+  },
+  removeDoubleSpaces: {
+    default: true,
+    type: Boolean,
+  },
+});
+
+const trimmedText = computed(() => {
+  let text = props.text;
+
+  if (props.trim) {
+    text = trim(props.text);
+  }
+
+  if (props.removeDoubleSpaces) {
+    text = text.replace(/ +(?= )/g, '');
+  }
+
+  return text;
+});
+
+const length = computed(() => {
+  return trimmedText.value.length;
+});
+</script>

package/src/components/BaseClipboard.vue

@@ -17,7 +17,7 @@
     >
       <div
         v-show="tooltipShown"
-        class="pointer-events-none absolute left-full z-10 items-center"
+        class="pointer-events-none absolute left-full z-[1] items-center"
       >
         <div
           class="ml-2 whitespace-nowrap rounded bg-slate-900 bg-opacity-80 px-3 py-2 text-xs leading-tight text-white backdrop-blur"

package/src/components/BaseDataIterator.stories.js

@@ -60,9 +60,9 @@ const template = `
         <BaseSelect
           :model-value="query.type ?? null"
           class="w-full rounded border-slate-300"
+          placeholder="-"
           @update:model-value="updateQueryValue('type', $event)"
         >
-          <option value="">-</option>
           <option value="video">
             Video
           </option>
@@ -78,9 +78,9 @@ const template = `
         <BaseSelect
           :model-value="query.access_level ?? null"
           class="w-full rounded border-slate-300"
+          placeholder="-"
           @update:model-value="updateQueryValue('access_level', $event)"
         >
-          <option value="">-</option>
           <option value="public">
             Public
           </option>