A set of components for the SCAYLE Panel and Add-ons
npm install @scayle/components
The SCAYLE Components Library offers essential components for developing SCAYLE Panel Add-ons written in Vue.js 3.
Visit the Add-On Developer Guide to learn more on how to use the components.
Visit the Components Upgrade Guide to learn more on how to update to the newest version.
Visit the Docs to learn more about our system requirements.
SCAYLE is a full-featured e-commerce software solution that comes with flexible APIs. Within SCAYLE, you can manage all aspects of your shop, such as products, stocks, customers, and transactions.
Learn more about SCAYLE’s architecture and commerce modules in the Docs.
``shell`
npm i -S @scayle/components
All components
`typescript
import * as components from '@scayle/components';
import '@scayle/components/dist/style.css';
for (let component of components) {
app.use(component);
}
`
Individual components
`typescript
import { Spinner, Modal } from '@scayle/components';
import '@scayle/components/dist/style.css';
app.use(Spinner).use(Modal);
`
Alternatively components can be automatically registered on demand using unplugin-vue-components.
Install the package (npm i unplugin-vue-components -D) and add the following to your webpack config.
`typescript`
plugins: [
/.../
require('unplugin-vue-components/webpack')({
dts: true,
resolvers: [
componentName => {
if (componentName.startsWith('Ay')) {
return {
name: componentName.slice(2),
from: '@scayle/components',
};
}
},
],
}),
];
Afterwards, whenever a component matching the pattern ay-name or AyName is found in a template, the component will automatically be registered for that component.
for example, this SFC
`html`
is compiled as
`html`
The library is designed to work well in both left-to-right and right-to-left languages.
For this it depends on the :dir() pseudo-class.dir
There is a polyfill for unsupported browsers, included as well, but it requires that you explicitly specify a attribute in your DOM. (Usually on html or body`)