@indielayer/ui 1.0.0-alpha.3 → 1.0.0-alpha.7

package/lib/style.css

@@ -1 +1 @@
-._alert_1sdha_2[data-v-35ce54d8]{color:var(--x-alert-text);background-color:var(--x-alert-bg);border-color:var(--x-alert-border)}._alert--glow_1sdha_1[data-v-35ce54d8]{box-shadow:0 0 #000,0 0 #000,0 10px 15px -3px var(--x-alert-glow),0 4px 6px -4px var(--x-alert-glow)}.dark ._alert_1sdha_2[data-v-35ce54d8]{color:var(--x-dark-alert-text, var(--x-alert-text));background-color:var(--x-dark-alert-bg, var(--x-alert-bg));border-color:var(--x-dark-alert-border, var(--x-alert-border))}._avatar_v7jzc_2[data-v-243016db]{color:var(--x-avatar-text);background-color:var(--x-avatar-bg);border-color:var(--x-avatar-border)}.dark ._avatar_v7jzc_2[data-v-243016db]{color:var(--x-dark-avatar-text, var(--x-avatar-text));background-color:var(--x-dark-avatar-bg, var(--x-avatar-bg));border-color:var(--x-dark-avatar-border, var(--x-avatar-border))}._button_1sbr9_2[data-v-d8eeb328]{color:var(--x-button-text);background-color:var(--x-button-bg);border-color:var(--x-button-border)}._button--glow_1sbr9_1[data-v-d8eeb328]{box-shadow:0 0 #000,0 0 #000,0 10px 15px -3px var(--x-button-glow),0 4px 6px -4px var(--x-button-glow)}._button_1sbr9_2[data-v-d8eeb328]:hover{color:var(--x-button-text-hover, var(--x-button-text));background-color:var(--x-button-bg-hover, var(--x-button-bg));border-color:var(--x-button-border-hover, var(--x-button-border))}._button_1sbr9_2[data-v-d8eeb328]:active{color:var(--x-button-text-active, var(--x-button-text));background-color:var(--x-button-bg-active, var(--x-button-bg));border-color:var(--x-button-border-active, var(--x-button-border))}.dark ._button_1sbr9_2[data-v-d8eeb328]{color:var(--x-dark-button-text, var(--x-button-text));background-color:var(--x-dark-button-bg, var(--x-button-bg));border-color:var(--x-dark-button-border, var(--x-button-border))}.dark ._button_1sbr9_2[data-v-d8eeb328]:hover{color:var(--x-dark-button-text-hover, var(--x-dark-button-text, var(--x-button-text)));background-color:var(--x-dark-button-bg-hover, var(--x-dark-button-bg, var(--x-button-bg)));border-color:var(--x-dark-button-border-hover, var(--x-dark-button-border, var(--x-button-border)))}.dark ._button_1sbr9_2[data-v-d8eeb328]:active{color:var(--x-dark-button-text-active, var(--x-dark-button-text));background-color:var(--x-dark-button-bg-active, var(--x-dark-button-bg, var(--x-button-bg)));border-color:var(--x-dark-button-border-active, var(--x-dark-button-border, var(--x-button-border)))}._button-group_s7fyl_2:not(._button-group--rounded_s7fyl_1)>:first-child{border-top-left-radius:.375rem;border-bottom-left-radius:.375rem;border-left-width:1px}._button-group_s7fyl_2:not(._button-group--rounded_s7fyl_1)>:last-child{border-top-right-radius:.375rem;border-bottom-right-radius:.375rem}._button-group--rounded_s7fyl_1>:first-of-type{border-top-left-radius:9999px;border-bottom-left-radius:9999px;border-left-width:1px}._button-group--rounded_s7fyl_1>:last-child{border-top-right-radius:9999px;border-bottom-right-radius:9999px}._checkbox--glow_1dz66_1[data-v-54fce636]{box-shadow:0 0 #000,0 0 #000,0 10px 15px -3px var(--x-glow),0 4px 6px -4px var(--x-glow)}._scrollWrap_1k3q9_2[data-v-ff88aa62]:before,._scrollWrap_1k3q9_2[data-v-ff88aa62]:after{content:"";pointer-events:none;position:absolute;z-index:1;transition:box-shadow .2s}._scrollWrap_1k3q9_2._horizontal_1k3q9_11[data-v-ff88aa62]:before,._scrollWrap_1k3q9_2._horizontal_1k3q9_11[data-v-ff88aa62]:after{top:0;bottom:0;width:20px}._scrollWrap_1k3q9_2._vertical_1k3q9_17[data-v-ff88aa62]:before,._scrollWrap_1k3q9_2._vertical_1k3q9_17[data-v-ff88aa62]:after{right:0;left:0;height:20px}._scrollWrap_1k3q9_2._horizontal_1k3q9_11[data-v-ff88aa62]:before{left:0}._scrollWrap_1k3q9_2._horizontal_1k3q9_11[data-v-ff88aa62]:after{right:0}._scrollWrap_1k3q9_2._vertical_1k3q9_17[data-v-ff88aa62]:before{top:0}._scrollWrap_1k3q9_2._vertical_1k3q9_17[data-v-ff88aa62]:after{bottom:0}._scrollWrap_1k3q9_2._shadow-left_1k3q9_36[data-v-ff88aa62]:before{box-shadow:inset 12px 0 10px -10px #00000012}._scrollWrap_1k3q9_2._shadow-right_1k3q9_40[data-v-ff88aa62]:after{box-shadow:inset -12px 0 10px -10px #00000012}._scrollWrap_1k3q9_2._shadow-top_1k3q9_44[data-v-ff88aa62]:before{box-shadow:inset 0 12px 10px -10px #00000012}._scrollWrap_1k3q9_2._shadow-bottom_1k3q9_48[data-v-ff88aa62]:after{box-shadow:inset 0 -12px 10px -10px #00000012}._hideScroll_1k3q9_53[data-v-ff88aa62]{-ms-overflow-style:auto;scrollbar-width:none}._hideScroll_1k3q9_53[data-v-ff88aa62]::-webkit-scrollbar{display:none}._link--shadow_1tilo_1[data-v-b6c57c10]{box-shadow:inset 0 -.315em 0 0 var(--x-shadow)}._link--shadow_1tilo_1[data-v-b6c57c10]:hover{box-shadow:inset 0 -1.125em 0 0 var(--x-shadow)}.dark ._link--shadow_1tilo_1[data-v-b6c57c10]{box-shadow:inset 0 -.315em 0 0 var(--x-dark-shadow)}.dark ._link--shadow_1tilo_1[data-v-b6c57c10]:hover{box-shadow:inset 0 -1.125em 0 0 var(--x-dark-shadow)}._menu-item_1v1kj_2[data-v-2c7185df]{color:var(--x-text);background-color:var(--x-bg)}._menu-item_1v1kj_2[data-v-2c7185df]:before{content:"";position:absolute;left:-1px;height:100%;width:1px;background-color:transparent}._menu-item_1v1kj_2[data-v-2c7185df]:hover{color:var(--x-text-hover, var(--x-text));background-color:var(--x-bg-hover, var(--x-bg))}.dark ._menu-item_1v1kj_2[data-v-2c7185df]{color:var(--x-dark-text);background:var(--x-dark-bg)}.dark ._menu-item_1v1kj_2[data-v-2c7185df]:hover{color:var(--x-dark-text-hover, var(--x-dark-text));background-color:var(--x-dark-bg-hover, var(--x-dark-bg))}.x-menu-inner ._menu-item_1v1kj_2[data-v-2c7185df]:hover:before,.x-menu-inner ._menu-item--active_1v1kj_1[data-v-2c7185df]:before{background-color:var(--x-border-hover)}._popover_2vipi_2 ._popoverContent_2vipi_3{visibility:hidden;transition-duration:.1s;transition-timing-function:cubic-bezier(.4,0,1,1)}._popover_2vipi_2 ._popoverTop_2vipi_8{--tw-translate-y: .5rem}._popover_2vipi_2 ._popoverRight_2vipi_11{--tw-translate-x: -.5rem}._popover_2vipi_2 ._popoverBottom_2vipi_14{--tw-translate-y: -.25rem}._popover_2vipi_2 ._popoverLeft_2vipi_17{--tw-translate-x: .5rem}._popover_2vipi_2._hover_2vipi_21:hover ._popoverContent_2vipi_3,._popover_2vipi_2._is-open_2vipi_22 ._popoverContent_2vipi_3{visibility:visible;transition-duration:.15s;transition-timing-function:cubic-bezier(0,0,.2,1)}._popover_2vipi_2._hover_2vipi_21:hover ._popoverTop_2vipi_8,._popover_2vipi_2._is-open_2vipi_22 ._popoverTop_2vipi_8{--tw-translate-y: .25rem}._popover_2vipi_2._hover_2vipi_21:hover ._popoverRight_2vipi_11,._popover_2vipi_2._is-open_2vipi_22 ._popoverRight_2vipi_11{--tw-translate-x: 0px}._popover_2vipi_2._hover_2vipi_21:hover ._popoverBottom_2vipi_14,._popover_2vipi_2._is-open_2vipi_22 ._popoverBottom_2vipi_14{--tw-translate-y: .25rem}._popover_2vipi_2._hover_2vipi_21:hover ._popoverLeft_2vipi_17,._popover_2vipi_2._is-open_2vipi_22 ._popoverLeft_2vipi_17{--tw-translate-x: 0px}._radio--glow_14rlz_1[data-v-857bd200]{box-shadow:0 0 #000,0 0 #000,0 10px 15px -3px var(--x-glow),0 4px 6px -4px var(--x-glow)}
+._alert_1sdha_2[data-v-35ce54d8]{color:var(--x-alert-text);background-color:var(--x-alert-bg);border-color:var(--x-alert-border)}._alert--glow_1sdha_1[data-v-35ce54d8]{box-shadow:0 0 #000,0 0 #000,0 10px 15px -3px var(--x-alert-glow),0 4px 6px -4px var(--x-alert-glow)}.dark ._alert_1sdha_2[data-v-35ce54d8]{color:var(--x-dark-alert-text, var(--x-alert-text));background-color:var(--x-dark-alert-bg, var(--x-alert-bg));border-color:var(--x-dark-alert-border, var(--x-alert-border))}._avatar_v7jzc_2[data-v-243016db]{color:var(--x-avatar-text);background-color:var(--x-avatar-bg);border-color:var(--x-avatar-border)}.dark ._avatar_v7jzc_2[data-v-243016db]{color:var(--x-dark-avatar-text, var(--x-avatar-text));background-color:var(--x-dark-avatar-bg, var(--x-avatar-bg));border-color:var(--x-dark-avatar-border, var(--x-avatar-border))}._button_1sbr9_2[data-v-6cb75733]{color:var(--x-button-text);background-color:var(--x-button-bg);border-color:var(--x-button-border)}._button--glow_1sbr9_1[data-v-6cb75733]{box-shadow:0 0 #000,0 0 #000,0 10px 15px -3px var(--x-button-glow),0 4px 6px -4px var(--x-button-glow)}._button_1sbr9_2[data-v-6cb75733]:hover{color:var(--x-button-text-hover, var(--x-button-text));background-color:var(--x-button-bg-hover, var(--x-button-bg));border-color:var(--x-button-border-hover, var(--x-button-border))}._button_1sbr9_2[data-v-6cb75733]:active{color:var(--x-button-text-active, var(--x-button-text));background-color:var(--x-button-bg-active, var(--x-button-bg));border-color:var(--x-button-border-active, var(--x-button-border))}.dark ._button_1sbr9_2[data-v-6cb75733]{color:var(--x-dark-button-text, var(--x-button-text));background-color:var(--x-dark-button-bg, var(--x-button-bg));border-color:var(--x-dark-button-border, var(--x-button-border))}.dark ._button_1sbr9_2[data-v-6cb75733]:hover{color:var(--x-dark-button-text-hover, var(--x-dark-button-text, var(--x-button-text)));background-color:var(--x-dark-button-bg-hover, var(--x-dark-button-bg, var(--x-button-bg)));border-color:var(--x-dark-button-border-hover, var(--x-dark-button-border, var(--x-button-border)))}.dark ._button_1sbr9_2[data-v-6cb75733]:active{color:var(--x-dark-button-text-active, var(--x-dark-button-text));background-color:var(--x-dark-button-bg-active, var(--x-dark-button-bg, var(--x-button-bg)));border-color:var(--x-dark-button-border-active, var(--x-dark-button-border, var(--x-button-border)))}._button-group_s7fyl_2:not(._button-group--rounded_s7fyl_1)>:first-child{border-top-left-radius:.375rem;border-bottom-left-radius:.375rem;border-left-width:1px}._button-group_s7fyl_2:not(._button-group--rounded_s7fyl_1)>:last-child{border-top-right-radius:.375rem;border-bottom-right-radius:.375rem}._button-group--rounded_s7fyl_1>:first-of-type{border-top-left-radius:9999px;border-bottom-left-radius:9999px;border-left-width:1px}._button-group--rounded_s7fyl_1>:last-child{border-top-right-radius:9999px;border-bottom-right-radius:9999px}._checkbox--glow_1dz66_1[data-v-05f49cb5]{box-shadow:0 0 #000,0 0 #000,0 10px 15px -3px var(--x-glow),0 4px 6px -4px var(--x-glow)}._scrollWrap_1k3q9_2[data-v-7362ac18]:before,._scrollWrap_1k3q9_2[data-v-7362ac18]:after{content:"";pointer-events:none;position:absolute;z-index:1;transition:box-shadow .2s}._scrollWrap_1k3q9_2._horizontal_1k3q9_11[data-v-7362ac18]:before,._scrollWrap_1k3q9_2._horizontal_1k3q9_11[data-v-7362ac18]:after{top:0;bottom:0;width:20px}._scrollWrap_1k3q9_2._vertical_1k3q9_17[data-v-7362ac18]:before,._scrollWrap_1k3q9_2._vertical_1k3q9_17[data-v-7362ac18]:after{right:0;left:0;height:20px}._scrollWrap_1k3q9_2._horizontal_1k3q9_11[data-v-7362ac18]:before{left:0}._scrollWrap_1k3q9_2._horizontal_1k3q9_11[data-v-7362ac18]:after{right:0}._scrollWrap_1k3q9_2._vertical_1k3q9_17[data-v-7362ac18]:before{top:0}._scrollWrap_1k3q9_2._vertical_1k3q9_17[data-v-7362ac18]:after{bottom:0}._scrollWrap_1k3q9_2._shadow-left_1k3q9_36[data-v-7362ac18]:before{box-shadow:inset 12px 0 10px -10px #00000012}._scrollWrap_1k3q9_2._shadow-right_1k3q9_40[data-v-7362ac18]:after{box-shadow:inset -12px 0 10px -10px #00000012}._scrollWrap_1k3q9_2._shadow-top_1k3q9_44[data-v-7362ac18]:before{box-shadow:inset 0 12px 10px -10px #00000012}._scrollWrap_1k3q9_2._shadow-bottom_1k3q9_48[data-v-7362ac18]:after{box-shadow:inset 0 -12px 10px -10px #00000012}._hideScroll_1k3q9_53[data-v-7362ac18]{-ms-overflow-style:auto;scrollbar-width:none}._hideScroll_1k3q9_53[data-v-7362ac18]::-webkit-scrollbar{display:none}._link--shadow_1tilo_1[data-v-af336fea]{box-shadow:inset 0 -.315em 0 0 var(--x-shadow)}._link--shadow_1tilo_1[data-v-af336fea]:hover{box-shadow:inset 0 -1.125em 0 0 var(--x-shadow)}.dark ._link--shadow_1tilo_1[data-v-af336fea]{box-shadow:inset 0 -.315em 0 0 var(--x-dark-shadow)}.dark ._link--shadow_1tilo_1[data-v-af336fea]:hover{box-shadow:inset 0 -1.125em 0 0 var(--x-dark-shadow)}._menu-item_1v1kj_2[data-v-295f8cb3]{color:var(--x-text);background-color:var(--x-bg)}._menu-item_1v1kj_2[data-v-295f8cb3]:before{content:"";position:absolute;left:-1px;height:100%;width:1px;background-color:transparent}._menu-item_1v1kj_2[data-v-295f8cb3]:hover{color:var(--x-text-hover, var(--x-text));background-color:var(--x-bg-hover, var(--x-bg))}.dark ._menu-item_1v1kj_2[data-v-295f8cb3]{color:var(--x-dark-text);background:var(--x-dark-bg)}.dark ._menu-item_1v1kj_2[data-v-295f8cb3]:hover{color:var(--x-dark-text-hover, var(--x-dark-text));background-color:var(--x-dark-bg-hover, var(--x-dark-bg))}.x-menu-inner ._menu-item_1v1kj_2[data-v-295f8cb3]:hover:before,.x-menu-inner ._menu-item--active_1v1kj_1[data-v-295f8cb3]:before{background-color:var(--x-border-hover)}._popover_2vipi_2 ._popoverContent_2vipi_3{visibility:hidden;transition-duration:.1s;transition-timing-function:cubic-bezier(.4,0,1,1)}._popover_2vipi_2 ._popoverTop_2vipi_8{--tw-translate-y: .5rem}._popover_2vipi_2 ._popoverRight_2vipi_11{--tw-translate-x: -.5rem}._popover_2vipi_2 ._popoverBottom_2vipi_14{--tw-translate-y: -.25rem}._popover_2vipi_2 ._popoverLeft_2vipi_17{--tw-translate-x: .5rem}._popover_2vipi_2._hover_2vipi_21:hover ._popoverContent_2vipi_3,._popover_2vipi_2._is-open_2vipi_22 ._popoverContent_2vipi_3{visibility:visible;transition-duration:.15s;transition-timing-function:cubic-bezier(0,0,.2,1)}._popover_2vipi_2._hover_2vipi_21:hover ._popoverTop_2vipi_8,._popover_2vipi_2._is-open_2vipi_22 ._popoverTop_2vipi_8{--tw-translate-y: .25rem}._popover_2vipi_2._hover_2vipi_21:hover ._popoverRight_2vipi_11,._popover_2vipi_2._is-open_2vipi_22 ._popoverRight_2vipi_11{--tw-translate-x: 0px}._popover_2vipi_2._hover_2vipi_21:hover ._popoverBottom_2vipi_14,._popover_2vipi_2._is-open_2vipi_22 ._popoverBottom_2vipi_14{--tw-translate-y: .25rem}._popover_2vipi_2._hover_2vipi_21:hover ._popoverLeft_2vipi_17,._popover_2vipi_2._is-open_2vipi_22 ._popoverLeft_2vipi_17{--tw-translate-x: 0px}._radio--glow_14rlz_1[data-v-4e34dad2]{box-shadow:0 0 #000,0 0 #000,0 10px 15px -3px var(--x-glow),0 4px 6px -4px var(--x-glow)}

package/lib/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.0.0-alpha.3";
+declare const _default: "1.0.0-alpha.7";
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indielayer/ui",
-  "version": "1.0.0-alpha.3",
+  "version": "1.0.0-alpha.7",
   "description": "Indielayer UI Components with Tailwind CSS build for Vue 3",
   "author": {
     "name": "João Teixeira",
@@ -40,6 +40,18 @@
     "./tailwind.preset.js": "./lib/tailwind.preset.js"
   },
   "sideEffects": false,
+  "scripts": {
+    "dev": "pnpm build-only && chokidar \"./src/**\" -c \"pnpm build-only\"",
+    "dev2": "vite build --watch",
+    "build": "pnpm generate && vite build",
+    "build-prod": "pnpm build && pnpm gen-types",
+    "typecheck": "vue-tsc --noEmit",
+    "build-only": "vite build",
+    "generate": "pnpm gen-version",
+    "gen-types": "vue-tsc --declaration --emitDeclarationOnly",
+    "gen-version": "node .scripts/gen-version.js",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
   "peerDependencies": {
     "tailwindcss": "^3.0.0",
     "vue": "^3.0.0"
@@ -62,7 +74,7 @@
     "postcss": "^8.4.4",
     "start-server-and-test": "^1.14.0",
     "tailwindcss": "^3.0.0",
-    "typescript": "^4.7.2",
+    "typescript": "~4.6.3",
     "vite": "^2.9.5",
     "vue": "^3.2.33",
     "vue-tsc": "^0.34.15"
@@ -83,17 +95,5 @@
   },
   "publishConfig": {
     "access": "public"
-  },
-  "scripts": {
-    "dev": "pnpm build-only && chokidar \"./src/**\" -c \"pnpm build-only\"",
-    "dev2": "vite build --watch",
-    "build": "pnpm generate && vite build",
-    "build-prod": "pnpm build && pnpm gen-types",
-    "typecheck": "vue-tsc --noEmit",
-    "build-only": "vite build",
-    "generate": "pnpm gen-version",
-    "gen-types": "vue-tsc --declaration --emitDeclarationOnly",
-    "gen-version": "node .scripts/gen-version.js",
-    "test": "echo \"Error: no test specified\" && exit 1"
   }
-}
+}

package/src/components/badge/Badge.vue

@@ -22,6 +22,8 @@ export default defineComponent({
       type: String as PropType<'left' | 'right'>,
       default: 'right',
     },
+    offsetX: [Number, String],
+    offsetY: [Number, String],
     animated: Boolean,
     outlined: Boolean,
     icon: String,
@@ -57,8 +59,18 @@ export default defineComponent({
       return classes
     })
 
+    const offsetStyle = computed(() => {
+      const style: any = {}
+
+      if (props.offsetX) style[props.align === 'left' ? 'marginLeft' : 'marginRight'] = props.offsetX + 'px'
+      if (props.offsetY) style[props.position === 'top' ? 'marginTop' : 'marginBottom'] = props.offsetY + 'px'
+
+      return style
+    })
+
     return {
       styles,
+      offsetStyle,
       positionClasses,
     }
   },
@@ -76,6 +88,7 @@ export default defineComponent({
       <div
         v-if="show"
         class="absolute rounded-full z-10 bg-[color:var(--x-badge-bg)]"
+        :style="offsetStyle"
         :class="[
           positionClasses,
           {

package/src/components/button/Button.vue

@@ -105,11 +105,11 @@ export default defineComponent({
             hover: { bg: !props.loading ? gray[100] : '' },
             active: { bg: !props.loading ? gray[200] : '' },
             dark: {
-              bg: gray[900],
+              bg: gray[800],
               text: 'white',
               border: gray[600],
-              hover: { bg: !props.loading ? gray[800] : '' },
-              active: { bg: !props.loading ? gray[700] : '' },
+              hover: { bg: !props.loading ? gray[700] : '' },
+              active: { bg: !props.loading ? gray[600] : '' },
             },
           }))
         }
@@ -381,7 +381,7 @@ export default defineComponent({
       :icon="iconRight"
       class="shrink-0"
       :class="[
-        [$slots.default ? 'mr-2' : 'm-0.5'],
+        [$slots.default ? 'ml-2' : 'm-0.5'],
         {
           invisible: loading,
         },

package/src/components/checkbox/Checkbox.vue

@@ -38,7 +38,7 @@ export default defineComponent({
 
     watch(() => props.modelValue, (value) => {
       checked.value = !!value
-    })
+    }, { immediate: true })
 
     watch(() => checked.value, (value) => {
       emit('update:modelValue', value)

package/src/components/container/Container.vue

@@ -16,7 +16,7 @@ export default defineComponent({
 <template>
   <component
     :is="tag"
-    class="container mx-auto px-4"
+    class="max-w-screen-2xl mx-auto px-4"
   >
     <slot></slot>
   </component>

package/src/components/icon/Icon.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { computed, defineComponent, inject } from 'vue'
+import { computed, defineComponent, inject, ref, watchEffect } from 'vue'
 import { useCommon } from '../../composables/common'
 import { injectIconsKey } from '../../composables/keys'
 
@@ -24,7 +24,7 @@ export default defineComponent({
   },
 
   setup(props) {
-    const icons: any = inject(injectIconsKey, {})
+    const icons: any = inject(injectIconsKey, () => {}, false)
     const sizeClasses = computed(() => {
       if (props.size === 'xs') return 'h-3 w-3'
       else if (props.size === 'sm') return 'h-4 w-4'
@@ -34,8 +34,66 @@ export default defineComponent({
       return 'h-5 w-5'
     })
 
+    const isWrapSVG = ref(false)
+    const computedIcon = ref('')
+    const computedFilled = ref(props.filled)
+    const computedViewBox = ref(props.viewBox)
+    const attrs = ref({})
+
+    watchEffect(() => {
+      const injectedIcon = icons[props.icon]
+
+      isWrapSVG.value = false
+      computedIcon.value = injectedIcon
+
+      if (injectedIcon) {
+        if (typeof injectedIcon === 'string') {
+          if (injectedIcon.startsWith('<svg')) {
+            isWrapSVG.value = true
+
+            const { content, attributes } = getSVG(injectedIcon)
+
+            attrs.value = attributes
+            computedIcon.value = content
+          } else {
+            isWrapSVG.value = false
+            computedIcon.value = injectedIcon
+          }
+        } else if (typeof injectedIcon === 'object') {
+          computedIcon.value = injectedIcon.icon
+          computedFilled.value = injectedIcon.filled || props.filled
+          computedViewBox.value = injectedIcon.viewBox || injectedIcon.viewbox || props.viewBox
+        }
+      } else {
+        computedIcon.value = props.icon
+      }
+    })
+
+    function getSVG(svgString: string) {
+      svgString = svgString.trim()
+      const content = svgString.substring(svgString.indexOf('>') + 1, svgString.lastIndexOf('</svg>'))
+      const attrsRaw = svgString.substring(svgString.indexOf('<svg') + 4, svgString.indexOf('>')).trim().match(/[\w-]+="[^"]*"/g)
+
+      const attributes: Record<string, string | null> = {}
+
+      attrsRaw?.forEach((a) => {
+        const [attribute, value] = a.split('=')
+
+        if (!['height', 'width', 'class'].includes(attribute)) attributes[attribute] = value.replace(/(^"|"$)/g, '')
+      })
+
+      return {
+        attributes,
+        content,
+      }
+    }
+
     return {
-      icons,
+      attrs,
+      isWrapSVG,
+      computedIcon,
+      computedFilled,
+      computedViewBox,
       sizeClasses,
     }
   },
@@ -44,13 +102,22 @@ export default defineComponent({
 
 <template>
   <svg
-    :class="[sizeClasses, { 'stroke-2': !filled}]"
-    :fill="filled ? 'currentColor' : 'none'"
-    :stroke="filled ? undefined : 'currentColor'"
-    :viewBox="viewBox"
-    :stroke-linecap="filled ? undefined : 'round'"
-    :stroke-linejoin="filled ? undefined : 'round'"
+    v-if="isWrapSVG"
+    class="inline"
+    :class="sizeClasses"
+    v-bind="attrs"
+    v-html="computedIcon"
+  />
+  <svg
+    v-else
     xmlns="http://www.w3.org/2000/svg"
-    v-html="icons[icon] ? icons[icon] : icon"
+    class="inline"
+    :class="[sizeClasses, { 'stroke-2': !computedFilled}]"
+    :stroke-linejoin="computedFilled ? undefined : 'round'"
+    :stroke-linecap="computedFilled ? undefined : 'round'"
+    :stroke="computedFilled ? undefined : 'currentColor'"
+    :fill="computedFilled ? 'currentColor' : 'none'"
+    :viewBox="computedViewBox"
+    v-html="computedIcon"
   />
 </template>

package/src/components/input/Input.vue

@@ -39,6 +39,7 @@ export default defineComponent({
       default: 'text',
     },
     inputClass: String,
+    block: Boolean,
   },
 
   emits: useInputtable.emits(),
@@ -74,9 +75,10 @@ export default defineComponent({
       if (!e.target) return
 
       const target = (e.target as HTMLInputElement)
-      const value = Number(target.value)
 
       if (props.type === 'number') {
+        const value = Number(target.value)
+
         if (typeof props.min !== 'undefined') {
           if (value < props.min) target.value = props.min.toString()
         }
@@ -111,7 +113,7 @@ export default defineComponent({
 <template>
   <label
     class="inline-block relative align-bottom text-left"
-    :class="{ 'mb-3': isInsideForm }"
+    :class="{ 'mb-3': isInsideForm, 'w-full': block }"
   >
     <p
       v-if="label"
@@ -156,7 +158,7 @@ export default defineComponent({
         :placeholder="placeholder"
         :readonly="readonly"
         :type="currentType"
-        :value="modelValue"
+        :value="modelValue || ''"
         v-bind="$attrs"
         v-on="inputListeners"
         @change="onChange"

package/src/components/link/Link.vue

@@ -51,7 +51,7 @@ export default defineComponent({
   <component
     :is="to ? 'router-link' : tag"
     :to="to"
-    class="transition duration-300 ease-in-out cursor-pointer
+    class="transition duration-300 ease-in-out cursor-pointer inline-flex
       text-[color:var(--x-text)]
       dark:text-[color:var(--x-dark-text)]
     "

package/src/components/menu/Menu.vue

@@ -27,8 +27,14 @@ export default defineComponent({
     collapseIcon: String,
     expanded: Boolean,
     disabled: Boolean,
-    rounded: Boolean,
-    filled: Boolean,
+    rounded: {
+      type: Boolean,
+      default: true,
+    },
+    filled: {
+      type: Boolean,
+      default: true,
+    },
   },
 
   emits: ['expand'],

package/src/components/menu/MenuItem.vue

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { defineComponent, ref, computed, watch, onMounted, onBeforeUnmount } from 'vue'
+import { useMutationObserver } from '@vueuse/core'
 import { useCSS } from '../../composables/css'
 import { useColors } from '../../composables/colors'
 import { useCommon } from '../../composables/common'
@@ -34,8 +35,14 @@ export default defineComponent({
     icon: String,
     iconRight: String,
     loading: Boolean,
-    rounded: Boolean,
-    filled: Boolean,
+    rounded: {
+      type: Boolean,
+      default: true,
+    },
+    filled: {
+      type: Boolean,
+      default: true,
+    },
     selected: Boolean,
     disabled: Boolean,
   },
@@ -46,32 +53,33 @@ export default defineComponent({
     const elRef = ref()
     const isActive = ref(false)
 
-    const filled = computed(() => props.filled || props.item.filled)
+    const filled = computed(() => props.filled || props.item?.filled)
     const cItem = computed(() => ({
       ...props,
       ...props.item,
     }))
 
     const htmlTag = cItem.value.to || cItem.value.href ? 'x-link' : 'div'
-    const isSupported = window && 'MutationObserver' in window
-    const classObserver = isSupported ? new MutationObserver(check) : null
 
     onMounted(() => {
       if (!elRef.value) return
 
       check()
 
-      if (isSupported && htmlTag === 'x-link') classObserver?.observe(elRef.value.$el, {
+      if (htmlTag === 'x-link') useMutationObserver(elRef.value.$el, check, {
         attributes: true,
         attributeFilter: ['class'],
       })
     })
 
-    onBeforeUnmount(() => {
-      if (classObserver) classObserver.disconnect()
-    })
-
     function onItemClick(e: Event) {
+      if (cItem.value.disabled) {
+        e.stopPropagation()
+        e.preventDefault()
+
+        return
+      }
+
       cItem.value.onClick && cItem.value.onClick(e)
       emit('click', e)
     }
@@ -100,7 +108,12 @@ export default defineComponent({
       const color = colors.getPalette(cItem.value.color || 'gray')
       const gray = colors.getPalette('gray')
 
-      if (cItem.value.disabled) return css.get('text', gray[300])
+      if (cItem.value.disabled) return css.variables({
+        text: gray[300],
+        dark: {
+          text: gray[600],
+        },
+      })
 
       if (filled.value) {
         if (isActive.value) {
@@ -193,7 +206,7 @@ export default defineComponent({
     :href="cItem.href"
     :target="cItem.target"
     :color="cItem.color"
-    class="relative flex items-center whitespace-nowrap px-3 mt-1"
+    class="relative !flex items-center whitespace-nowrap px-3 mt-1"
     :style="cssVariables"
     :class="[
       $style['menu-item'],

package/src/components/modal/Modal.vue

@@ -4,12 +4,14 @@ import { computed, defineComponent, ref, watch, type PropType } from 'vue'
 import { onClickOutside, useEventListener } from '@vueuse/core'
 
 import XScroll from '../../components/scroll/Scroll.vue'
+import XIcon from '../icon/Icon.vue'
 
 export default defineComponent({
   name: 'XModal',
 
   components: {
     XScroll,
+    XIcon,
   },
 
   props: {
@@ -144,7 +146,7 @@ export default defineComponent({
         >
           <div
             v-if="showClose"
-            class="absolute p-1 top-4 right-4 rounded-full bg-opacity-10 hover:bg-opacity-30 cursor-pointer"
+            class="flex absolute p-1 top-4 z-10 right-4 rounded-full bg-opacity-10 hover:bg-opacity-30 cursor-pointer"
             :class="[
               $slots.image ? 'bg-gray-900 text-white' : 'bg-gray-500 text-gray-800 dark:text-gray-300'
             ]"

package/src/components/radio/Radio.vue

@@ -131,10 +131,11 @@ export default defineComponent({
 <template>
   <label
     ref="elRef"
-    class="inline-block mb-1 relative cursor-pointer focus:outline-none"
+    tabindex="0"
+    class="inline-block mb-1 relative cursor-pointer focus:outline-none group"
     :aria-selected="selected ? 'true' : 'false'"
     :aria-disabled="(disabled || loading) ? 'true' : undefined"
-    tabindex="0"
+    :style="styles"
     @keypress.prevent.stop.space="$emit('update:modelValue', value)"
   >
     <div
@@ -150,13 +151,12 @@ export default defineComponent({
         class="invisible absolute"
       />
       <div
-        class="rounded-full flex justify-center items-center flex-shrink-0 border-2
+        class="rounded-full flex justify-center items-center flex-shrink-0 border-2 outline-offset-2 outline-slate-300 dark:outline-slate-500 group-focus:outline-1 group-focus:outline
           border-[color:var(--x-border)]
           bg-[color:var(--x-bg)]
           dark:border-[color:var(--x-dark-border)]
           dark:bg-[color:var(--x-dark-bg)]
         "
-        :style="styles"
         :class="[
           [glow && !disabled && !loading ? $style['radio--glow'] : ''],
           {

package/src/components/scroll/Scroll.vue

@@ -25,7 +25,7 @@ export default defineComponent({
 
     if (props.horizontal && props.mousewheel)
       useEventListener(scrollEl, 'wheel', (e: WheelEvent) => {
-        if (!scrollEl.value) return
+        if (!scrollEl.value || scrollEl.value.scrollWidth <= scrollEl.value.clientWidth) return
 
         e.preventDefault()
         scrollEl.value.scrollLeft += e.deltaY + e.deltaX

package/src/components/tab/Tab.vue

@@ -1,16 +1,23 @@
 <script lang="ts">
-import { defineComponent, inject, reactive, computed, toRefs, ref, onMounted } from 'vue'
+import { defineComponent, inject, reactive, computed, toRefs, ref, onMounted, onBeforeUnmount } from 'vue'
+import { useMutationObserver } from '@vueuse/core'
 import { injectTabKey } from '../../composables/keys'
 import { useCommon } from '../../composables/common'
+import XIcon from '../icon/Icon.vue'
+import XLink from '../link/Link.vue'
 
 export default defineComponent({
   name: 'XTab',
 
+  components: {
+    XIcon,
+    XLink,
+  },
+
   props: {
     ...useCommon.props(),
     value: {
       type: [String, Number],
-      required: true,
     },
     tag: {
       type: String,
@@ -20,11 +27,14 @@ export default defineComponent({
     label: String,
     icon: String,
     disabled: Boolean,
+    exact: Boolean,
   },
 
   setup(props) {
+    const cValue = computed(() => props.to || props.value )
     const cLabel = computed(() => props.label || props.value)
     const teleportTo = ref(null)
+    const elRef = ref()
 
     const tabs = inject(injectTabKey, {
       tabsContentRef: ref(null),
@@ -36,24 +46,56 @@ export default defineComponent({
       }),
     })
 
+    const cExact = computed(() => tabs.state.exact || props.exact)
+    const cSize = computed(() => props.size || tabs.state.size)
+
     onMounted(() => {
       teleportTo.value = tabs.tabsContentRef.value
+
+      if (props.to) {
+        check()
+        useMutationObserver(elRef.value.$el, check, {
+          attributes: true,
+          attributeFilter: ['class'],
+        })
+      }
     })
 
+    function check() {
+      if (elRef.value && elRef.value.$el && (props.to)) {
+        const active = elRef.value?.$el.classList.contains(cExact.value ? 'router-link-exact-active' : 'router-link-active')
+
+        if (active) tabs.activateTab(cValue.value)
+      }
+    }
+
     const state = reactive({
-      selected: computed(() => tabs.state.active === props.value),
+      selected: computed(() => tabs.state.active === cValue.value),
     })
 
     function onClickTab() {
-      tabs.activateTab(props.value)
+      if (!props.to) tabs.activateTab(cValue.value)
     }
 
+    const sizeClasses = computed(() => {
+      if (cSize.value === 'xs') return 'text-xs'
+      else if (cSize.value === 'sm') return 'text-sm'
+      else if (cSize.value === 'lg') return 'text-lg'
+      else if (cSize.value === 'xl') return 'text-xl'
+
+      return ''
+    })
+
     return {
       ...toRefs(state),
       variant: tabs.state.variant,
       grow: tabs.state.grow,
+      elRef,
       cLabel,
+      cValue,
+      cSize,
       tabs,
+      sizeClasses,
       teleportTo,
       onClickTab,
     }
@@ -62,12 +104,14 @@ export default defineComponent({
 </script>
 
 <template>
-  <li :data-value="value" class="shrink-0 font-medium" :class="{ 'flex-1': grow }">
+  <li :data-value="cValue" class="shrink-0 font-medium" :class="{ 'flex-1': grow }">
     <component
-      :is="to ? 'router-link' : tag"
+      :is="to ? 'x-link' : tag"
+      ref="elRef"
       :to="to"
       class="py-2 transition-colors duration-150 ease-in-out whitespace-nowrap text-center"
       :class="[
+        sizeClasses,
         {
           'px-8': variant === 'block',
           'text-[color:var(--x-tabs-text)] dark:text-[color:var(--x-dark-tabs-text)]': selected,
@@ -84,11 +128,11 @@ export default defineComponent({
         name="tab"
         :label="label"
         :value="value"
-        :size="size"
+        :size="cSize"
         :icon="icon"
       >
         <div class="flex items-center justify-center">
-          <x-icon v-if="icon" :icon="icon" :size="size" class="mr-1.5 shrink-0" />
+          <XIcon v-if="icon" :icon="icon" :size="cSize" class="mr-1.5 shrink-0" />
           <span>{{ cLabel }}</span>
         </div>
       </slot>