@volverjs/ui-vue 0.0.3-beta.4 → 0.0.3

package/dist/stories/argTypes.d.ts

@@ -1,3 +1,4 @@
+import { Placement, Position, Side } from '@/constants';
 export declare const ValidArgTypes: {
     valid: {
         type: string;
@@ -108,7 +109,7 @@ export declare const IconArgTypes: {
         };
         table: {
             defaultValue: {
-                summary: string;
+                summary: Position;
             };
         };
     };
@@ -151,6 +152,20 @@ export declare const OptionsArgTypes: {
             };
         };
     };
+    disabledKey: {
+        type: {
+            summary: string[];
+        };
+        description: string;
+        control: {
+            type: string;
+        };
+        table: {
+            defaultValue: {
+                summary: string;
+            };
+        };
+    };
 };
 export declare const CountArgTypes: {
     count: {
@@ -257,6 +272,138 @@ export declare const IdNameArgTypes: {
         };
     };
 };
+export declare const DropdownArgTypes: {
+    placement: {
+        description: string;
+        options: (Side | Placement)[];
+        control: {
+            type: string;
+        };
+        table: {
+            defaultValue: {
+                summary: string;
+            };
+        };
+    };
+    transitionName: {
+        description: string;
+        control: {
+            type: string;
+        };
+    };
+    offset: {
+        description: string;
+        control: {
+            type: string;
+        };
+        table: {
+            defaultValue: {
+                summary: number;
+            };
+            type: {
+                summary: string[];
+            };
+        };
+    };
+    shift: {
+        description: string;
+        control: {
+            type: string;
+        };
+        table: {
+            defaultValue: {
+                summary: boolean;
+            };
+            type: {
+                summary: string[];
+            };
+        };
+    };
+    flip: {
+        description: string;
+        control: {
+            type: string;
+        };
+        table: {
+            defaultValue: {
+                summary: boolean;
+            };
+            type: {
+                summary: string[];
+            };
+        };
+    };
+    size: {
+        description: string;
+        control: {
+            type: string;
+        };
+        table: {
+            defaultValue: {
+                summary: string;
+            };
+            type: {
+                summary: string[];
+            };
+        };
+    };
+    autoPlacement: {
+        description: string;
+        control: {
+            type: string;
+        };
+        table: {
+            defaultValue: {
+                summary: boolean;
+            };
+            type: {
+                summary: string[];
+            };
+        };
+    };
+    arrow: {
+        description: string;
+        control: {
+            type: string;
+        };
+        table: {
+            defaultValue: {
+                summary: boolean;
+            };
+            type: {
+                summary: string;
+            };
+        };
+    };
+    autoClose: {
+        description: string;
+        control: {
+            type: string;
+        };
+        table: {
+            defaultValue: {
+                summary: boolean;
+            };
+            type: {
+                summary: string;
+            };
+        };
+    };
+    triggerWidth: {
+        description: string;
+        control: {
+            type: string;
+        };
+        table: {
+            defaultValue: {
+                summary: boolean;
+            };
+            type: {
+                summary: string;
+            };
+        };
+    };
+};
 export declare const UnselectableArgTypes: {
     unselectable: {
         type: string;
@@ -268,7 +415,7 @@ export declare const UnselectableArgTypes: {
         };
     };
 };
-export declare const FloatingArgTypes: {
+export declare const FloatingLabelArgTypes: {
     floating: {
         type: string;
         description: string;
@@ -368,7 +515,7 @@ export declare const InputTextareaArgTypes: {
         };
         table: {
             defaultValue: {
-                summary: string;
+                summary: Position;
             };
         };
     };
@@ -803,6 +950,20 @@ export declare const CheckboxRadioGroupArgTypes: {
             };
         };
     };
+    disabledKey: {
+        type: {
+            summary: string[];
+        };
+        description: string;
+        control: {
+            type: string;
+        };
+        table: {
+            defaultValue: {
+                summary: string;
+            };
+        };
+    };
     invalid: {
         type: string;
         description: string;

package/package.json

@@ -19,7 +19,7 @@
   "bugs": {
     "url": "https://github.com/volverjs/ui-vue/issues"
   },
-  "version": "0.0.3-beta.4",
+  "version": "0.0.3",
   "engines": {
     "node": ">= 16.x"
   },
@@ -38,56 +38,58 @@
     "*.d.ts"
   ],
   "dependencies": {
-    "@iconify/vue": "^4.0.2",
-    "@vueuse/core": "^9.11.0",
-    "jsdom": "^21.0.0",
+    "@floating-ui/vue": "^0.2.0",
+    "@iconify/tools": "^2.2.2",
+    "@iconify/vue": "^4.1.0",
+    "@vueuse/core": "^9.12.0",
+    "jsdom": "^21.1.0",
+    "mitt": "^3.0.0",
     "nanoid": "^4.0.0",
     "vue": "^3.2.45"
   },
   "devDependencies": {
     "@babel/core": "^7.20.12",
     "@babel/preset-env": "^7.20.2",
-    "@iconify/tools": "^2.2.1",
     "@iconify/types": "^2.0.0",
-    "@iconify/utils": "^2.0.12",
+    "@iconify/utils": "^2.1.0",
     "@mdx-js/react": "^2.2.1",
     "@rushstack/eslint-patch": "^1.2.0",
-    "@storybook/addon-a11y": "^7.0.0-beta.31",
-    "@storybook/addon-actions": "^7.0.0-beta.31",
-    "@storybook/addon-docs": "^7.0.0-beta.31",
-    "@storybook/addon-essentials": "^7.0.0-beta.31",
-    "@storybook/addon-interactions": "^7.0.0-beta.31",
-    "@storybook/addon-links": "^7.0.0-beta.31",
-    "@storybook/addons": "7.0.0-beta.31",
-    "@storybook/builder-vite": "7.0.0-beta.31",
-    "@storybook/channel-postmessage": "7.0.0-beta.31",
-    "@storybook/channel-websocket": "7.0.0-beta.31",
-    "@storybook/cli": "^7.0.0-beta.31",
-    "@storybook/client-api": "7.0.0-beta.31",
-    "@storybook/client-logger": "7.0.0-beta.31",
-    "@storybook/core-common": "7.0.0-beta.31",
-    "@storybook/jest": "^0.0.11-next.0",
-    "@storybook/preview-api": "7.0.0-beta.31",
-    "@storybook/preview-web": "7.0.0-beta.31",
-    "@storybook/testing-library": "^0.0.14-next.1",
-    "@storybook/theming": "^7.0.0-beta.31",
-    "@storybook/vue3": "^7.0.0-beta.31",
-    "@storybook/vue3-vite": "^7.0.0-beta.31",
+    "@storybook/addon-a11y": "7.0.0-beta.29",
+    "@storybook/addon-actions": "7.0.0-beta.29",
+    "@storybook/addon-docs": "7.0.0-beta.29",
+    "@storybook/addon-essentials": "7.0.0-beta.29",
+    "@storybook/addon-interactions": "7.0.0-beta.29",
+    "@storybook/addon-links": "7.0.0-beta.29",
+    "@storybook/addons": "7.0.0-beta.29",
+    "@storybook/builder-vite": "7.0.0-beta.29",
+    "@storybook/channel-postmessage": "7.0.0-beta.29",
+    "@storybook/channel-websocket": "7.0.0-beta.29",
+    "@storybook/cli": "7.0.0-beta.29",
+    "@storybook/client-api": "7.0.0-beta.29",
+    "@storybook/client-logger": "7.0.0-beta.29",
+    "@storybook/core-common": "7.0.0-beta.29",
+    "@storybook/jest": "^0.0.10",
+    "@storybook/preview-api": "7.0.0-beta.29",
+    "@storybook/preview-web": "7.0.0-beta.29",
+    "@storybook/test-runner": "^0.9.3",
+    "@storybook/testing-library": "^0.0.13",
+    "@storybook/theming": "7.0.0-beta.29",
+    "@storybook/vue3": "7.0.0-beta.29",
+    "@storybook/vue3-vite": "7.0.0-beta.29",
     "@types/jest-axe": "^3.5.5",
     "@types/jsdom": "^20.0.1",
     "@types/node": "18.11.18",
     "@types/react": "^18.0.27",
-    "@types/uuid": "^9.0.0",
-    "@types/yargs": "^17.0.20",
+    "@types/yargs": "^17.0.22",
     "@vitejs/plugin-vue": "^4.0.0",
-    "@volverjs/style": "0.1.6",
+    "@volverjs/style": "0.1.7",
     "@vue/compiler-sfc": "^3.2.45",
     "@vue/eslint-config-prettier": "^7.0.0",
     "@vue/eslint-config-typescript": "^11.0.2",
-    "@vue/test-utils": "^2.2.7",
+    "@vue/test-utils": "^2.2.8",
     "@vue/tsconfig": "^0.1.3",
     "change-case": "^4.1.2",
-    "eslint": "^8.32.0",
+    "eslint": "^8.33.0",
     "eslint-config-prettier": "^8.6.0",
     "eslint-mdx": "^2.0.5",
     "eslint-plugin-mdx": "^2.0.5",
@@ -95,29 +97,29 @@
     "eslint-plugin-vue": "^9.9.0",
     "glob": "^8.1.0",
     "jest-axe": "^7.0.0",
-    "jest-diff": "^29.3.1",
+    "jest-diff": "^29.4.1",
     "jest-get-type": "^29.2.0",
-    "jsdom": "^21.0.0",
+    "jsdom": "^21.1.0",
     "npm-run-all": "^4.1.5",
     "preact": "^10.11.3",
     "prettier": "^2.8.3",
-    "pretty-format": "^29.3.1",
+    "pretty-format": "^29.4.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "remark": "^14.0.2",
-    "sass": "^1.57.1",
+    "sass": "^1.58.0",
     "sass-loader": "^13.2.0",
-    "storybook": "^7.0.0-beta.31",
+    "storybook": "7.0.0-beta.29",
     "storybook-addon-markdown-docs": "^1.0.5",
     "storybook-dark-mode": "^2.0.5",
     "storybook-version": "^0.1.1",
     "ts-node": "^10.9.1",
-    "typescript": "~4.9.4",
-    "unplugin-auto-import": "^0.12.1",
-    "unplugin-vue-components": "^0.22.12",
+    "typescript": "~4.9.5",
+    "unplugin-auto-import": "^0.13.0",
+    "unplugin-vue-components": "^0.23.0",
     "vite": "^4.0.4",
     "vite-plugin-eslint": "^1.8.1",
-    "vite-plugin-externalize-deps": "^0.4.0",
+    "vite-plugin-externalize-deps": "^0.5.0",
     "vue-loader": "^17.0.1",
     "vue-tsc": "^1.0.24",
     "yargs": "^17.6.2"
@@ -218,6 +220,11 @@
       "import": "./dist/components/VvDropdown/VvDropdown.es.js",
       "default": "./dist/components/VvDropdown/VvDropdown.umd.js"
     },
+    "./vv-dropdown-item": {
+      "types": "./dist/components/VvDropdownItem/VvDropdownItem.vue.d.ts",
+      "import": "./dist/components/VvDropdownItem/VvDropdownItem.es.js",
+      "default": "./dist/components/VvDropdownItem/VvDropdownItem.umd.js"
+    },
     "./vv-icon": {
       "types": "./dist/components/VvIcon/VvIcon.vue.d.ts",
       "import": "./dist/components/VvIcon/VvIcon.es.js",
@@ -267,6 +274,8 @@
     "type-check": "vue-tsc --noEmit",
     "lint": "eslint . --ext .vue,.js,.ts,.mdx --fix",
     "generate-icons": "ts-node-esm ./scripts/icons.ts --srcPath=src/assets/icons",
-    "generate-tsd": "vue-tsc --declaration --emitDeclarationOnly"
+    "generate-tsd": "vue-tsc --declaration --emitDeclarationOnly",
+    "test": "test-storybook --stories-json",
+    "credits": "npx @opengovsg/credits-generator"
   }
 }

package/src/Volver.ts

@@ -6,11 +6,62 @@ import {
 	type IconifyJSON,
 	type PartialIconifyAPIConfig,
 } from '@iconify/vue'
-import type { App, Plugin } from 'vue'
+import type { App, Component, Plugin } from 'vue'
+import { DEFAULT_ICONIFY_PROVIDER, INJECTION_KEY_VOLVER } from '@/constants'
+import directives from '@/directives'
 
-export const VOLVER_PREFIX = 'ds'
+export function useDefaultProps(
+	component: Component,
+	defaults?: Record<string, unknown>,
+	name?: string,
+) {
+	const componentName = name || component.name
 
-interface IVolverParams {
+	if (!componentName) {
+		return component
+	}
+
+	const componentDefaults = defaults?.[componentName] as Record<
+		string,
+		unknown
+	>
+	const props = (component as Record<string, unknown>).props as Record<
+		string,
+		unknown
+	>
+
+	if (!componentDefaults || !props) {
+		return { ...component, name: componentName }
+	}
+
+	return {
+		...component,
+		name: componentName,
+		props: Object.keys(props).reduce((acc, key) => {
+			if (!(key in componentDefaults)) {
+				acc[key] = props[key]
+				return acc
+			}
+			const customDefault = componentDefaults[key]
+			if (typeof props[key] === 'function' || Array.isArray(props[key])) {
+				acc[key] = {
+					type: props[key],
+					default: customDefault,
+				}
+				return acc
+			}
+			acc[key] = {
+				...(props[key] as Record<string, unknown>),
+				default: customDefault,
+			}
+			return acc
+		}, {} as Record<string, unknown>),
+	}
+}
+
+export type DefaultOptions = Record<string, Record<string, unknown>>
+
+export type VolverOptions = {
 	/**
 	 * If true set "fetchOptions" with credentials: 'include'
 	 */
@@ -20,17 +71,35 @@ interface IVolverParams {
 	 */
 	fetchOptions?: RequestInit
 	/**
-	 * Array of https://docs.iconify.design/types/iconify-json.html
-	 * This collections will be added during plugin install
+	 * Array of iconify collections that will be added during plugin install
+	 * @see https://docs.iconify.design/types/iconify-json.html
 	 */
 	iconsCollections?: IconifyJSON[]
 	/**
 	 * Set true inside nuxt
 	 */
 	nuxt?: boolean
+	/**
+	 * Default iconify provider
+	 * @see https://docs.iconify.design/icon-components/vue/add-collection.html
+	 * @default 'vv'
+	 */
+	provider?: string
+	/**
+	 * Components to install
+	 */
+	components?: Record<string, Component>
+	/**
+	 * Alias to install
+	 */
+	aliases?: Record<string, Component>
+	/**
+	 * Default props for components
+	 */
+	defaults?: DefaultOptions
 }
 
-export interface IVolver extends IVolverParams {
+export interface VolverInterface {
 	/**
 	 * @param {String} src Icon source path (url)
 	 * @param {RequestInit} options
@@ -38,13 +107,15 @@ export interface IVolver extends IVolverParams {
 	 */
 	fetchIcon(src: string, options?: RequestInit): Promise<string | undefined>
 	/**
-	 * Add iconify collection to library https://docs.iconify.design/icon-components/vue/add-collection.html
+	 * Add iconify collection to library
+	 * @see https://docs.iconify.design/icon-components/vue/add-collection.html
 	 * @param {IconifyJSON} collection
 	 * @param {String} providerName Optional provider name
 	 */
 	addCollection(collection: IconifyJSON, providerName?: string): boolean
 	/**
-	 * Add icon to collection https://docs.iconify.design/icon-components/vue/add-icon.html
+	 * Add icon to collection
+	 * @see https://docs.iconify.design/icon-components/vue/add-icon.html
 	 * @param {String} name
 	 * @param {IconifyIcon} data
 	 * @returns {Boolean} true on success, false if something is wrong with data
@@ -65,39 +136,56 @@ export interface IVolver extends IVolverParams {
 	 */
 	provider: string
 	/**
-	 * Icon collections
+	 * Array of installed iconify collections
+	 * @see https://docs.iconify.design/types/iconify-json.html
 	 */
 	iconsCollections: IconifyJSON[]
+	/**
+	 * Set true inside nuxt
+	 */
+	nuxt: boolean
 }
 
-export class Volver implements IVolver {
-	fetchOptions: RequestInit
-	iconsCollections: IconifyJSON[]
-	provider: string
-	nuxt: boolean
+export class Volver implements VolverInterface {
+	fetchOptions: RequestInit = {}
+	nuxt = false
+	iconsCollections: IconifyJSON[] = []
+	provider = DEFAULT_ICONIFY_PROVIDER
 
 	constructor({
-		fetchWithCredentials = false,
-		fetchOptions = {},
-		iconsCollections = [],
-		nuxt = false,
-	}: IVolverParams = {}) {
+		fetchWithCredentials,
+		fetchOptions,
+		provider,
+		nuxt,
+		iconsCollections,
+	}: VolverOptions = {}) {
+		// fetch options
+		if (fetchOptions) {
+			this.fetchOptions = fetchOptions
+		}
+		// fetch with credentials sugar syntax
 		if (fetchWithCredentials) {
-			fetchOptions = { ...fetchOptions, credentials: 'include' }
+			this.fetchOptions = { ...this.fetchOptions, credentials: 'include' }
+		}
+		// default iconify provider
+		if (provider) {
+			this.provider = provider
+		}
+		// enable nuxt mode
+		if (nuxt) {
+			this.nuxt = nuxt
+		}
+		// add iconify collections
+		if (iconsCollections && Array.isArray(iconsCollections)) {
+			iconsCollections.forEach((iconsCollection) => {
+				this.addCollection(iconsCollection, this.provider)
+			})
 		}
-		this.provider = VOLVER_PREFIX
-		this.fetchOptions = fetchOptions
-		this.iconsCollections = iconsCollections
-		// Add default icons collection (simple, normal, detailed)
-		// and others custom collections
-		this.iconsCollections.forEach((iconsCollection) => {
-			this.addCollection(iconsCollection, this.provider)
-		})
-		this.nuxt = nuxt
 	}
 
 	addCollection(collection: IconifyJSON, providerName?: string): boolean {
-		return addCollection(collection, providerName)
+		this.iconsCollections = [...this.iconsCollections, collection]
+		return addCollection(collection, providerName ?? this.provider)
 	}
 
 	addIcon(name: string, data: IconifyIcon): boolean {
@@ -130,13 +218,37 @@ const VolverPlugin: Plugin = {
 	 * @param {App} Vue
 	 * @param {Object} options
 	 */
-	install(app: App, options: IVolverParams) {
+	install(app: App, options: VolverOptions) {
 		const volver = new Volver(options)
 
 		// register global methods
-		app.config.globalProperties.$ds = volver
+		app.config.globalProperties.$vv = volver
+
+		if (options.components) {
+			Object.entries(options.components).forEach(([name, component]) => {
+				app.component(
+					name,
+					useDefaultProps(component, options.defaults),
+				)
+			})
+		}
+
+		if (options.aliases) {
+			Object.entries(options.aliases).forEach(([name, component]) => {
+				app.component(
+					name,
+					useDefaultProps(component, options.defaults, name),
+				)
+			})
+		}
+
+		// register directives
+		Object.entries(directives).forEach(([name, directive]) => {
+			app.directive(name, directive)
+		})
 
-		app.provide(VOLVER_PREFIX, volver)
+		// provide volver to components
+		app.provide(INJECTION_KEY_VOLVER, volver)
 	},
 }
 

package/src/assets/icons/detailed/add-circle.svg

@@ -1 +1,12 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><rect width="32" height="32" fill="#fff" opacity="0"/><g transform="translate(2 2)"><g fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="2"><circle cx="14" cy="14" r="14" stroke="none"/><circle cx="14" cy="14" r="13" fill="none"/></g><line x2="10" transform="translate(9 14)" fill="none" stroke="#000" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/><line y2="10" transform="translate(14 9)" fill="none" stroke="#000" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+    <g transform="translate(2 2)">
+        <g fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="2">
+            <circle cx="14" cy="14" r="14" stroke="none" />
+            <circle cx="14" cy="14" r="13" fill="none" />
+        </g>
+        <line x2="10" transform="translate(9 14)" fill="none" stroke="#000" stroke-linecap="round"
+            stroke-miterlimit="10" stroke-width="2" />
+        <line y2="10" transform="translate(14 9)" fill="none" stroke="#000" stroke-linecap="round"
+            stroke-miterlimit="10" stroke-width="2" />
+    </g>
+</svg>

package/src/assets/icons/detailed/add.svg

@@ -1 +1,8 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><rect width="32" height="32" fill="#fff" opacity="0"/><g transform="translate(4.333 4.636)"><line x2="24" transform="translate(-0.333 11.363)" fill="none" stroke="#000" stroke-linecap="round" stroke-width="2"/><line y2="24" transform="translate(11.667 -0.637)" fill="none" stroke="#000" stroke-linecap="round" stroke-width="2"/></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+    <g transform="translate(4.333 4.636)">
+        <line x2="24" transform="translate(-0.333 11.363)" fill="none" stroke="#000" stroke-linecap="round"
+            stroke-width="2" />
+        <line y2="24" transform="translate(11.667 -0.637)" fill="none" stroke="#000" stroke-linecap="round"
+            stroke-width="2" />
+    </g>
+</svg>

package/src/assets/icons/detailed/align-center.svg

@@ -1 +1,12 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><rect width="32" height="32" fill="#fff" opacity="0"/><g transform="translate(5.333 8)"><line x1="14" transform="translate(3.667 5)" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><line x1="22" transform="translate(-0.333 -1)" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><line x1="22" transform="translate(-0.333 11)" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><line x1="14" transform="translate(3.667 17)" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+    <g transform="translate(5.333 8)">
+        <line x1="14" transform="translate(3.667 5)" fill="none" stroke="#000" stroke-linecap="round"
+            stroke-linejoin="round" stroke-width="2" />
+        <line x1="22" transform="translate(-0.333 -1)" fill="none" stroke="#000" stroke-linecap="round"
+            stroke-linejoin="round" stroke-width="2" />
+        <line x1="22" transform="translate(-0.333 11)" fill="none" stroke="#000" stroke-linecap="round"
+            stroke-linejoin="round" stroke-width="2" />
+        <line x1="14" transform="translate(3.667 17)" fill="none" stroke="#000" stroke-linecap="round"
+            stroke-linejoin="round" stroke-width="2" />
+    </g>
+</svg>

package/src/assets/icons/detailed/align-justify.svg

@@ -1 +1,12 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><rect width="32" height="32" fill="#fff" opacity="0"/><g transform="translate(5.333 8)"><line x1="22" transform="translate(-0.333 5)" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><line x1="22" transform="translate(-0.333 -1)" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><line x1="22" transform="translate(-0.333 11)" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><line x1="22" transform="translate(-0.333 17)" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+    <g transform="translate(5.333 8)">
+        <line x1="22" transform="translate(-0.333 5)" fill="none" stroke="#000" stroke-linecap="round"
+            stroke-linejoin="round" stroke-width="2" />
+        <line x1="22" transform="translate(-0.333 -1)" fill="none" stroke="#000" stroke-linecap="round"
+            stroke-linejoin="round" stroke-width="2" />
+        <line x1="22" transform="translate(-0.333 11)" fill="none" stroke="#000" stroke-linecap="round"
+            stroke-linejoin="round" stroke-width="2" />
+        <line x1="22" transform="translate(-0.333 17)" fill="none" stroke="#000" stroke-linecap="round"
+            stroke-linejoin="round" stroke-width="2" />
+    </g>
+</svg>