feat(VMultiSelect): add CSS Properties support (#45)

* fix(VMultiSelect): import deps styles for standalone usage

* feat(VMultiSelect): add CSS Properties support

* docs(VMultiSelect): add CSS Properties docs

docs/components/multi-select.md

@@ -186,7 +186,41 @@ None
 
 ## CSS Variables
 
-None
+```css
+:root {
+  --v-multi-select-border-color: var(--v-input-border-color);
+  --v-multi-select-border-radius: var(--v-input-border-radius);
+  --v-multi-select-bg-color: var(--v-input-bg-color);
+  --v-multi-select-text-color: theme('colors.gray.800');
+  --v-multi-select-height: auto;
+  --v-multi-select-placeholder-color: var(--v-input-placeholder-color);
+  --v-multi-select-border-radius: var(--v-input-border-radius);
+  --v-multi-select-padding-x: var(--v-input-padding-x);
+  --v-multi-select-padding-y: var(--v-input-padding-y);
+  --v-multi-select-font-size: var(--v-input-font-size);
+
+  /* item */
+  --v-multi-select-item-font-size: theme('fontSize.base');
+  --v-multi-select-item-font-weight: theme('fontWeight.normal');
+  --v-multi-select-item-bg-color: theme('colors.white');
+  --v-multi-select-item-text-color: theme('colors.gray.800');
+  --v-multi-select-item-padding-x: theme('padding.3');
+  --v-multi-select-item-padding-y: theme('padding.2');
+  --v-multi-select-item-hover-bg-color: theme('colors.primary.500');
+  --v-multi-select-item-hover-text-color: theme('colors.white');
+
+  /* error */
+  --v-multi-select-error-border-color: theme('colors.error.500');
+
+  /* icon */
+  --v-multi-select-icon-color: theme('colors.gray.500');
+  --v-multi-select-check-icon-color: theme('colors.primary.500');
+
+  /* dropdown */
+  --v-multi-select-dropdown-bg-color: theme('colors.white');
+  --v-multi-select-dropdown-border-radius: theme('borderRadius.md');
+}
+```
 
 ## Manual Installation
 

packages/multi-select/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@gits-id/multi-select",
   "version": "0.13.5",
-  "description": "GITS Input Component",
+  "description": "Vue Multi Select Component",
   "scripts": {
     "build": "vite build && vue-tsc --emitDeclarationOnly && mv dist/src dist/types",
     "prepublishOnly": "npm run build",
@@ -10,13 +10,15 @@
   "keywords": [
     "input",
     "gits",
-    "ui-component"
+    "ui-component",
+    "multi-select"
   ],
   "author": "Warsono <[email protected]>",
   "license": "MIT",
   "dependencies": {
     "@gits-id/badge": "^0.13.5",
     "@gits-id/tooltip": "^0.13.5",
+    "@gits-id/forms": "^0.13.5",
     "@vueuse/core": "^7.7.1",
     "vee-validate": "^4.6.1",
     "vue": "^3.2.31"

packages/multi-select/src/VMultiSelect.stories.js

@@ -209,3 +209,26 @@ export const InitialErrors = (args) => ({
     </form>
 `,
 });
+
+export const CssVars = () => ({
+  components: {
+    VMultiSelect,
+  },
+  template: `
+  <v-multi-select
+    badge-color="purple"
+    :style="{
+      '--badge-bg-color': 'white',
+      '--badge-color': 'purple',
+      '--v-multi-select-bg-color': 'purple',
+      '--v-multi-select-border-color': 'purple',
+      '--v-multi-select-text-color': 'white',
+      '--v-multi-select-border-radius': '16px',
+      '--v-multi-select-padding-x': '1rem',
+      '--v-multi-select-item-hover-bg-color': 'purple',
+      '--v-multi-select-item-hover-text-color': 'white',
+      '--v-multi-select-icon-color': 'white',
+      '--v-multi-select-check-icon-color': 'purple',
+    }"
+  />`,
+});