@sellmate/design-system-vue 1.0.21 → 1.0.23

package/README.md

@@ -19,18 +19,19 @@ yarn add @sellmate/design-system-vue
 ### Vue 3
 
 ```ts
+import '@sellmate/design-system/styles.css';
 import { createApp } from 'vue';
-import { defineCustomElementsDesignSystem } from '@sellmate/design-system-vue/loader';
+import { StencilVuePlugin } from '@sellmate/design-system-vue';
 import App from './App.vue';
 
 const app = createApp(App);
 
-// Define custom elements
-defineCustomElementsDesignSystem();
-
+app.use(StencilVuePlugin);
 app.mount('#app');
 ```
 
+Import `@sellmate/design-system/styles.css` once at app entry so global token CSS variables are available for components like `sd-button`.
+
 ### Vite Configuration
 
 If you are using Vite, you need to configure `vite-plugin-static-copy` to serve the design system assets (icons, lazy-loaded components) correctly.

package/dist/components.d.ts

@@ -2,11 +2,13 @@ import { type StencilVueComponent } from '@stencil/vue-output-target/runtime';
 import type { JSX } from '@sellmate/design-system';
 export declare const SdBadge: StencilVueComponent<JSX.SdBadge>;
 export declare const SdButton: StencilVueComponent<JSX.SdButton>;
+export declare const SdButtonV2: StencilVueComponent<JSX.SdButtonV2>;
 export declare const SdCard: StencilVueComponent<JSX.SdCard>;
 export declare const SdCheckbox: StencilVueComponent<JSX.SdCheckbox, JSX.SdCheckbox["value"]>;
 export declare const SdDateBox: StencilVueComponent<JSX.SdDateBox>;
 export declare const SdDatePicker: StencilVueComponent<JSX.SdDatePicker, JSX.SdDatePicker["value"]>;
 export declare const SdDateRangePicker: StencilVueComponent<JSX.SdDateRangePicker, JSX.SdDateRangePicker["value"]>;
+export declare const SdDropdownButton: StencilVueComponent<JSX.SdDropdownButton>;
 export declare const SdField: StencilVueComponent<JSX.SdField>;
 export declare const SdFilePicker: StencilVueComponent<JSX.SdFilePicker, JSX.SdFilePicker["value"]>;
 export declare const SdFloatingPortal: StencilVueComponent<JSX.SdFloatingPortal>;

package/dist/components.js

@@ -24,6 +24,17 @@ export const SdButton = /*@__PURE__*/ defineContainer('sd-button', undefined, [
 ], [
     'sdClick'
 ]);
+export const SdButtonV2 = /*@__PURE__*/ defineContainer('sd-button-v2', undefined, [
+    'name',
+    'label',
+    'icon',
+    'ariaLabel',
+    'disabled',
+    'type',
+    'sdClick'
+], [
+    'sdClick'
+]);
 export const SdCard = /*@__PURE__*/ defineContainer('sd-card', undefined, [
     'bordered',
     'sdClass'
@@ -73,6 +84,17 @@ export const SdDateRangePicker = /*@__PURE__*/ defineContainer('sd-date-range-pi
 ], [
     'sdUpdate'
 ], 'value', 'sdUpdate', undefined);
+export const SdDropdownButton = /*@__PURE__*/ defineContainer('sd-dropdown-button', undefined, [
+    'name',
+    'label',
+    'items',
+    'disabled',
+    'sdClick',
+    'sdDropDownShow'
+], [
+    'sdClick',
+    'sdDropDownShow'
+]);
 export const SdField = /*@__PURE__*/ defineContainer('sd-field', undefined, [
     'name',
     'rules',

package/dist/index.d.ts

@@ -1,4 +1,5 @@
+import '@sellmate/design-system/styles.css';
 export * from './components';
 export * from './plugin';
 export { default as SdTable } from './SdTable';
-export type { SdTableSortDir, SdTableColumn, Row as SdTableRow, SelectOption, SelectOptionGroup, SelectEvents, SelectMultipleEvents, SelectStyleProps, RadioValue, RadioOption, ButtonVariant, ButtonSize, Rule, ValidatableField, SdModalCardButtonProps, SdTooltipProps, TagColor, TagSize, ToastType, CheckedType, Type as DateBoxType, TabOption, } from '@sellmate/design-system';
+export type { SdTableSortDir, SdTableColumn, Row as SdTableRow, SelectOption, SelectOptionGroup, SelectEvents, SelectMultipleEvents, SelectStyleProps, RadioValue, RadioOption, ButtonVariant, ButtonSize, ButtonV2Name, DropdownButtonItem, DropdownButtonName, DropdownButtonSize, DropdownButtonValue, Rule, ValidatableField, SdModalCardButtonProps, SdTooltipProps, TagColor, TagSize, ToastType, CheckedType, Type as DateBoxType, TabOption, } from '@sellmate/design-system';

package/dist/index.js

@@ -1,3 +1,4 @@
+import '@sellmate/design-system/styles.css';
 export * from './components';
 export * from './plugin';
 export { default as SdTable } from './SdTable';

package/lib/components.ts

@@ -34,6 +34,19 @@ export const SdButton: StencilVueComponent<JSX.SdButton> = /*@__PURE__*/ defineC
 ]);
 
 
+export const SdButtonV2: StencilVueComponent<JSX.SdButtonV2> = /*@__PURE__*/ defineContainer<JSX.SdButtonV2>('sd-button-v2', undefined, [
+  'name',
+  'label',
+  'icon',
+  'ariaLabel',
+  'disabled',
+  'type',
+  'sdClick'
+], [
+  'sdClick'
+]);
+
+
 export const SdCard: StencilVueComponent<JSX.SdCard> = /*@__PURE__*/ defineContainer<JSX.SdCard>('sd-card', undefined, [
   'bordered',
   'sdClass'
@@ -96,6 +109,19 @@ export const SdDateRangePicker: StencilVueComponent<JSX.SdDateRangePicker, JSX.S
 'value', 'sdUpdate', undefined);
 
 
+export const SdDropdownButton: StencilVueComponent<JSX.SdDropdownButton> = /*@__PURE__*/ defineContainer<JSX.SdDropdownButton>('sd-dropdown-button', undefined, [
+  'name',
+  'label',
+  'items',
+  'disabled',
+  'sdClick',
+  'sdDropDownShow'
+], [
+  'sdClick',
+  'sdDropDownShow'
+]);
+
+
 export const SdField: StencilVueComponent<JSX.SdField> = /*@__PURE__*/ defineContainer<JSX.SdField>('sd-field', undefined, [
   'name',
   'rules',

package/lib/css.d.ts

@@ -0,0 +1 @@
+declare module '@sellmate/design-system/styles.css';

package/lib/index.ts

@@ -1,3 +1,5 @@
+import '@sellmate/design-system/styles.css';
+
 export * from './components';
 export * from './plugin';
 export { default as SdTable } from './SdTable';
@@ -20,6 +22,11 @@ export type {
  // Button types
  ButtonVariant,
  ButtonSize,
+ ButtonV2Name,
+ DropdownButtonItem,
+ DropdownButtonName,
+ DropdownButtonSize,
+ DropdownButtonValue,
  // Form types
  Rule,
  ValidatableField,

package/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@sellmate/design-system-vue",
- "version": "1.0.21",
+ "version": "1.0.23",
  "description": "Design System - Vue Component Wrappers",
  "keywords": [
   "vue",
@@ -45,7 +45,7 @@
   "vue": "^3.4.38"
  },
  "dependencies": {
-  "@sellmate/design-system": "^1.0.20",
+  "@sellmate/design-system": "^1.0.22",
   "@stencil/vue-output-target": "^0.11.8"
  },
  "peerDependencies": {