@volverjs/ui-vue 0.0.4 → 0.0.5-beta.2

package/dist/stories/argTypes.d.ts

@@ -1,4 +1,4 @@
-import { Placement, Position, Side } from '@/constants';
+import { Placement, Position, Side } from '../constants';
 export declare const ValidArgTypes: {
     valid: {
         type: string;
@@ -285,6 +285,18 @@ export declare const DropdownArgTypes: {
             };
         };
     };
+    strategy: {
+        description: string;
+        options: string[];
+        control: {
+            type: string;
+        };
+        table: {
+            defaultValue: {
+                summary: string;
+            };
+        };
+    };
     transitionName: {
         description: string;
         control: {

package/package.json

@@ -19,11 +19,11 @@
   "bugs": {
     "url": "https://github.com/volverjs/ui-vue/issues"
   },
-  "version": "0.0.4",
+  "version": "0.0.5-beta.2",
   "engines": {
     "node": ">= 16.x"
   },
-  "packageManager": "pnpm@7.8.0",
+  "packageManager": "pnpm@7.29.0",
   "type": "module",
   "main": "./dist/Volver.umd.js",
   "module": "./dist/Volver.es.js",
@@ -38,23 +38,24 @@
     "*.d.ts"
   ],
   "dependencies": {
-    "@volverjs/style": "0.1.8",
-    "@floating-ui/vue": "^0.2.0",
-    "@iconify/tools": "^2.2.2",
+    "@floating-ui/vue": "^0.2.1",
+    "@iconify/tools": "^2.2.6",
     "@iconify/vue": "^4.1.0",
-    "@vueuse/core": "^9.12.0",
-    "jsdom": "^21.1.0",
+    "@volverjs/style": "0.1.9-beta.4",
+    "@vueuse/core": "^9.13.0",
+    "jsdom": "^21.1.1",
+    "maska": "^2.1.7",
     "mitt": "^3.0.0",
-    "nanoid": "^4.0.0",
+    "nanoid": "^4.0.1",
     "vue": "^3.2.47"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.12",
+    "@babel/core": "^7.21.3",
     "@babel/preset-env": "^7.20.2",
-    "@babel/preset-typescript": "^7.18.6",
+    "@babel/preset-typescript": "^7.21.0",
     "@iconify/types": "^2.0.0",
-    "@iconify/utils": "^2.1.0",
-    "@mdx-js/react": "^2.2.1",
+    "@iconify/utils": "^2.1.5",
+    "@mdx-js/react": "^2.3.0",
     "@rushstack/eslint-patch": "^1.2.0",
     "@storybook/addon-a11y": "7.0.0-beta.40",
     "@storybook/addon-actions": "7.0.0-beta.40",
@@ -62,7 +63,6 @@
     "@storybook/addon-essentials": "7.0.0-beta.40",
     "@storybook/addon-interactions": "7.0.0-beta.40",
     "@storybook/addon-links": "7.0.0-beta.40",
-    "@storybook/addons": "7.0.0-beta.40",
     "@storybook/builder-vite": "7.0.0-beta.40",
     "@storybook/channel-postmessage": "7.0.0-beta.40",
     "@storybook/channel-websocket": "7.0.0-beta.40",
@@ -75,55 +75,52 @@
     "@storybook/preview-web": "7.0.0-beta.40",
     "@storybook/test-runner": "^0.10.0-next.8",
     "@storybook/testing-library": "^0.0.14-next.1",
-    "@storybook/theming": "7.0.0-beta.40",
     "@storybook/vue3": "7.0.0-beta.40",
     "@storybook/vue3-vite": "7.0.0-beta.40",
     "@types/jest-axe": "^3.5.5",
-    "@types/jsdom": "^20.0.1",
-    "@types/node": "18.11.18",
-    "@types/react": "^18.0.27",
-    "@types/yargs": "^17.0.22",
-    "@vitejs/plugin-vue": "^4.0.0",
+    "@types/jsdom": "^21.1.0",
+    "@types/node": "18.15.5",
+    "@types/react": "^18.0.28",
+    "@types/yargs": "^17.0.23",
+    "@vitejs/plugin-vue": "^4.1.0",
     "@vue/compiler-sfc": "^3.2.47",
-    "@vue/eslint-config-prettier": "^7.0.0",
+    "@vue/eslint-config-prettier": "^7.1.0",
     "@vue/eslint-config-typescript": "^11.0.2",
-    "@vue/test-utils": "^2.2.10",
+    "@vue/test-utils": "^2.3.2",
     "@vue/tsconfig": "^0.1.3",
     "change-case": "^4.1.2",
-    "eslint": "^8.33.0",
-    "eslint-config-prettier": "^8.6.0",
+    "eslint": "^8.36.0",
+    "eslint-config-prettier": "^8.8.0",
     "eslint-mdx": "^2.0.5",
     "eslint-plugin-mdx": "^2.0.5",
-    "eslint-plugin-storybook": "^0.6.10",
+    "eslint-plugin-storybook": "^0.6.11",
     "eslint-plugin-vue": "^9.9.0",
-    "glob": "^8.1.0",
+    "glob": "^7.1.6",
     "jest-axe": "^7.0.0",
-    "jest-diff": "^29.4.1",
-    "jest-get-type": "^29.2.0",
-    "jsdom": "^21.1.0",
+    "jest-diff": "^29.5.0",
+    "jest-get-type": "^29.4.3",
+    "jsdom": "^21.1.1",
     "npm-run-all": "^4.1.5",
-    "preact": "^10.11.3",
-    "prettier": "^2.8.3",
-    "pretty-format": "^29.4.1",
+    "prettier": "^2.8.6",
+    "pretty-format": "^29.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "remark": "^14.0.2",
-    "sass": "^1.58.0",
-    "sass-loader": "^13.2.0",
+    "sass": "^1.59.3",
     "storybook": "7.0.0-beta.40",
     "storybook-addon-markdown-docs": "^1.0.5",
-    "storybook-dark-mode": "^2.0.5",
+    "storybook-dark-mode": "^2.1.1",
     "storybook-version": "^0.1.1",
+    "terser": "^5.16.6",
     "ts-node": "^10.9.1",
     "typescript": "~4.9.5",
-    "unplugin-auto-import": "^0.13.0",
-    "unplugin-vue-components": "^0.23.0",
-    "vite": "^4.1.1",
+    "unplugin-auto-import": "^0.15.1",
+    "unplugin-vue-components": "^0.24.1",
+    "vite": "^4.2.1",
     "vite-plugin-eslint": "^1.8.1",
     "vite-plugin-externalize-deps": "^0.5.0",
-    "vue-loader": "^17.0.1",
-    "vue-tsc": "^1.0.24",
-    "yargs": "^17.6.2"
+    "vue-tsc": "^1.2.0",
+    "yargs": "^17.7.1"
   },
   "typesVersions": {
     "*": {
@@ -135,6 +132,90 @@
       ],
       "icons": [
         "dist/icons.d.ts"
+      ],
+      "directives": [
+        "dist/directives/index.d.ts"
+      ],
+      "v-contextmenu": [
+        "dist/directives/v-contextmenu.d.ts"
+      ],
+      "v-tooltip": [
+        "dist/directives/v-tooltip.d.ts"
+      ],
+      "components": [
+        "dist/components/index.d.ts"
+      ],
+      "vv-accordion": [
+        "dist/components/VvAccordion/VvAccordion.vue.d.ts"
+      ],
+      "vv-accordion-group": [
+        "dist/components/VvAccordionGroup/VvAccordionGroup.vue.d.ts"
+      ],
+      "vv-action": [
+        "dist/components/VvAction/VvAction.vue.d.ts"
+      ],
+      "vv-badge": [
+        "dist/components/VvBadge/VvBadge.vue.d.ts"
+      ],
+      "vv-breadcrumb": [
+        "dist/components/VvBreadcrumb/VvBreadcrumb.vue.d.ts"
+      ],
+      "vv-button": [
+        "dist/components/VvButton/VvButton.vue.d.ts"
+      ],
+      "vv-button-group": [
+        "dist/components/VvButtonGroup/VvButtonGroup.vue.d.ts"
+      ],
+      "vv-card": [
+        "dist/components/VvCard/VvCard.vue.d.ts"
+      ],
+      "vv-checkbox": [
+        "dist/components/VvCheckbox/VvCheckbox.vue.d.ts"
+      ],
+      "vv-checkbox-group": [
+        "dist/components/VvCheckboxGroup/VvCheckboxGroup.vue.d.ts"
+      ],
+      "vv-combobox": [
+        "dist/components/VvCombobox/VvCombobox.vue.d.ts"
+      ],
+      "vv-dialog": [
+        "dist/components/VvDialog/VvDialog.vue.d.ts"
+      ],
+      "vv-dropdown": [
+        "dist/components/VvDropdown/VvDropdown.vue.d.ts"
+      ],
+      "vv-dropdown-action": [
+        "dist/components/VvDropdownAction/VvDropdownAction.vue.d.ts"
+      ],
+      "vv-dropdown-item": [
+        "dist/components/VvDropdownItem/VvDropdownItem.vue.d.ts"
+      ],
+      "vv-dropdown-option": [
+        "dist/components/VvDropdownOption/VvDropdownOption.vue.d.ts"
+      ],
+      "vv-icon": [
+        "dist/components/VvIcon/VvIcon.vue.d.ts"
+      ],
+      "vv-input-text": [
+        "dist/components/VvInputText/VvInputText.vue.d.ts"
+      ],
+      "vv-progress": [
+        "dist/components/VvProgress/VvProgress.vue.d.ts"
+      ],
+      "vv-radio": [
+        "dist/components/VvRadio/VvRadio.vue.d.ts"
+      ],
+      "vv-radio-group": [
+        "dist/components/VvRadioGroup/VvRadioGroup.vue.d.ts"
+      ],
+      "vv-select": [
+        "dist/components/VvSelect/VvSelect.vue.d.ts"
+      ],
+      "vv-textarea": [
+        "dist/components/VvTextarea/VvTextarea.vue.d.ts"
+      ],
+      "vv-tooltip": [
+        "dist/components/VvTooltip/VvTooltip.vue.d.ts"
       ]
     }
   },
@@ -161,6 +242,11 @@
       "import": "./dist/directives/index.es.js",
       "default": "./dist/directives/index.umd.js"
     },
+    "./v-contextmenu": {
+      "types": "./dist/directives/v-contextmenu.d.ts",
+      "import": "./dist/directives/v-contextmenu.es.js",
+      "default": "./dist/directives/v-contextmenu.umd.js"
+    },
     "./v-tooltip": {
       "types": "./dist/directives/v-tooltip.d.ts",
       "import": "./dist/directives/v-tooltip.es.js",

package/src/Volver.ts

@@ -6,8 +6,8 @@ import {
 	type IconifyJSON,
 	type PartialIconifyAPIConfig,
 } from '@iconify/vue'
-import type { App, Component, Directive, Plugin } from 'vue'
-import { DEFAULT_ICONIFY_PROVIDER, INJECTION_KEY_VOLVER } from '@/constants'
+import type { App, Component, Directive, Plugin, Ref } from 'vue'
+import { DEFAULT_ICONIFY_PROVIDER, INJECTION_KEY_VOLVER } from './constants'
 
 export function useDefaultProps(
 	component: Component,
@@ -83,7 +83,7 @@ export type VolverOptions = {
 	 * @see https://docs.iconify.design/icon-components/vue/add-collection.html
 	 * @default 'vv'
 	 */
-	provider?: string
+	iconsProvider?: string
 	/**
 	 * Components to install
 	 */
@@ -125,19 +125,19 @@ export interface VolverInterface {
 	 */
 	addIcon(name: string, data: IconifyIcon): boolean
 	/**
-	 * Add custom config for provider
+	 * Add custom config for icons provider
 	 * @param {String} provider
 	 * @param {PartialIconifyAPIConfig} customConfig
 	 * @returns {Boolean} true on success, false if something is wrong with data
 	 */
-	addAPIProvider(
+	addIconsAPIProvider(
 		provider: string,
 		customConfig: PartialIconifyAPIConfig,
 	): boolean
 	/**
 	 * Current provider
 	 */
-	provider: string
+	iconsProvider: string
 	/**
 	 * Array of installed iconify collections
 	 * @see https://docs.iconify.design/types/iconify-json.html
@@ -147,55 +147,82 @@ export interface VolverInterface {
 	 * Set true inside nuxt
 	 */
 	nuxt: boolean
+	/**
+	 * Components defaults options
+	 */
+	defaults: Ref<DefaultOptions>
 }
 
 export class Volver implements VolverInterface {
-	fetchOptions: RequestInit = {}
-	nuxt = false
-	iconsCollections: IconifyJSON[] = []
-	provider = DEFAULT_ICONIFY_PROVIDER
+	private _fetchOptions: RequestInit = {}
+	private _iconsCollections: IconifyJSON[] = []
+	private _iconsProvider = DEFAULT_ICONIFY_PROVIDER
+	private _nuxt = false
+	defaults: Ref<DefaultOptions> = ref({})
 
 	constructor({
 		fetchWithCredentials,
 		fetchOptions,
-		provider,
+		iconsProvider,
 		nuxt,
 		iconsCollections,
+		defaults,
 	}: VolverOptions = {}) {
 		// fetch options
 		if (fetchOptions) {
-			this.fetchOptions = fetchOptions
+			this._fetchOptions = fetchOptions
 		}
 		// fetch with credentials sugar syntax
 		if (fetchWithCredentials) {
-			this.fetchOptions = { ...this.fetchOptions, credentials: 'include' }
+			this._fetchOptions = {
+				...this._fetchOptions,
+				credentials: 'include',
+			}
 		}
 		// default iconify provider
-		if (provider) {
-			this.provider = provider
+		if (iconsProvider) {
+			this._iconsProvider = iconsProvider
 		}
 		// enable nuxt mode
 		if (nuxt) {
-			this.nuxt = nuxt
+			this._nuxt = nuxt
 		}
 		// add iconify collections
 		if (iconsCollections && Array.isArray(iconsCollections)) {
 			iconsCollections.forEach((iconsCollection) => {
-				this.addCollection(iconsCollection, this.provider)
+				this.addCollection(iconsCollection, this._iconsProvider)
 			})
 		}
+		if (defaults) {
+			this.defaults.value = defaults
+		}
+	}
+
+	get nuxt(): boolean {
+		return this._nuxt
 	}
 
-	addCollection(collection: IconifyJSON, providerName?: string): boolean {
-		this.iconsCollections = [...this.iconsCollections, collection]
-		return addCollection(collection, providerName ?? this.provider)
+	get iconsProvider(): string {
+		return this._iconsProvider
+	}
+
+	get iconsCollections(): IconifyJSON[] {
+		return this._iconsCollections
+	}
+
+	addCollection(
+		collection: IconifyJSON,
+		providerName: string = this._iconsProvider,
+	): boolean {
+		this._iconsCollections.push(collection)
+		return addCollection(collection, providerName)
 	}
 
 	addIcon(name: string, data: IconifyIcon): boolean {
 		return addIcon(name, data)
 	}
 
-	addAPIProvider(
+	addIconsAPIProvider(
 		provider: string,
 		customConfig: PartialIconifyAPIConfig,
 	): boolean {
@@ -207,7 +234,7 @@ export class Volver implements VolverInterface {
 		options: RequestInit = { cache: 'force-cache' },
 	): Promise<string | undefined> {
 		return new Promise((resolve, reject) => {
-			fetch(src, { ...this.fetchOptions, ...options })
+			fetch(src, { ...this._fetchOptions, ...options })
 				.catch((e) => reject(e))
 				.then((response) => response?.text())
 				.then((svg?: string) => resolve(svg))