Directives and Services

Directives and Services

Besides visual components, the library ships directives, a notification service, an event bus and shared mixins that the components use internally. You can use them in your own code too. This page documents each one with the names used in the source.

Global directives

These are registered by createComponents() (directives-mandetory.ts).

v-copy

Copies text to the clipboard on click and adds an underline animation class.

<span v-copy>Copy my text</span>
<span v-copy="order.code">Copy the order code</span>

The bound value is read once when the element is mounted; later changes are not applied.

v-track

Sends a click event to analytics through Core's TrackUser.onClick().

<v-btn v-track:click="'Home Storefront Preview ● Open Live Product'">Open</v-btn>

v-dynamic-scripts

Loads <script> tags found inside the element (external scripts by src are loaded once). Only use it with content you trust.

<div v-dynamic-scripts="true" v-html="embedCode"></div>

v-dragscroll

Lets users scroll an element by dragging with the mouse.

Usage	Effect
v-dragscroll	Drag-scroll in both directions
v-dragscroll.x / .y / .xy	Horizontal only / vertical only / both
.ctrl, .shift, .alt, .meta	Only while that key is held
.no-child-drag	Do not start dragging from child elements
.no-select	Disable text selection while dragging
v-dragscroll="{ target: '.selector' }"	Apply to a child element matched by a CSS selector

v-size

Calls your function with the element's { width, height } when it is resized (uses ResizeObserver, debounced by 500 ms).

<div v-size="({ width, height }) => (cardWidth = width)"></div>

Other directives in directives/

These are not registered globally. Import and register them yourself if you need them:

File	Purpose
directives/keyboard/DirectiveCtrlKeydown.ts	React to Ctrl + key combinations given as modifiers.
directives/level/LevelDirective.ts	Hide elements by the user's app level: v-level.min="BEGINNER", v-level.max="BEGINNER" (reads the Vuex store).

NotificationService

@selldone/components-vue/plugins/notification/NotificationService.ts shows toast notifications through @kyvg/vue3-notification in the regular-notifications group. Render ui/notification/side/UNotificationSide.vue once in your root component (the Storefront does this in StorefrontApp.vue), and make sure window.$t is set by your i18n setup, because default titles are translated.

import NotificationService from "@selldone/components-vue/plugins/notification/NotificationService.ts";

NotificationService.showSuccessAlert(null, "Saved successfully.");
NotificationService.showErrorAlert(null, "Could not save.", "Optional detail");
NotificationService.showWarningAlert(null, "Check the form.");

// Show a Laravel-style API error from axios
axios.post(url, data).catch((error) => NotificationService.showLaravelError(error));

Other methods: showAwardAlert, showNotificationAlert, showMessage, openDangerAlert, openConfirmationAlert and openDeleteAlert.

EventBus

A tiny reactive event bus in @selldone/components-vue/utils/events/EventBus.ts:

import { EventBus } from "@selldone/components-vue/utils/events/EventBus.ts";

const onUpdate = (payload) => console.log(payload);

EventBus.$on("my-event", onUpdate);
EventBus.$emit("my-event", { id: 1 });
EventBus.$off("my-event", onUpdate); // or EventBus.$off("my-event") to remove all

The file also exports an EventName enum with the event names used across Selldone components.

Mixins

CoreMixin is installed globally. Topic mixins in mixin/ are imported by components that need them, and you can use them in your own components:

Mixin	Typical use
TemplateMixin	Theme colors (ThemeColorLight, …), isMobile, isStandalone
DateMixin	Date formatting helpers
CurrencyMixin	Currency helpers
ProductMixin, OrderMixin	Product and order helpers
AuthMixin, RouteMixin, MapMixin, ClubMixin, ImageMixin	Login, routing, maps, customer club and image helpers

Plugins

Folder	Purpose
plugins/vuetify	VuetifyInstance(i18n), see Theming and Styles
plugins/notification	NotificationService
plugins/gtag	GtagEcommerce analytics helpers
plugins/filepond	FilePond loader for uploaders
plugins/firebase	Push notification helper
plugins/native	Native app interface

Next steps

• Installation and Registration
• Theming and Styles
• FAQ