@indielayer/ui 1.0.0-alpha.5 → 1.0.0-alpha.8

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-7ada6753]{color:var(--x-button-text);background-color:var(--x-button-bg);border-color:var(--x-button-border)}._button--glow_1sbr9_1[data-v-7ada6753]{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-7ada6753]: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-7ada6753]: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-7ada6753]{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-7ada6753]: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-7ada6753]: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-6f9d99e4]{color:var(--x-text);background-color:var(--x-bg)}._menu-item_1v1kj_2[data-v-6f9d99e4]:before{content:"";position:absolute;left:-1px;height:100%;width:1px;background-color:transparent}._menu-item_1v1kj_2[data-v-6f9d99e4]: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-6f9d99e4]{color:var(--x-dark-text);background:var(--x-dark-bg)}.dark ._menu-item_1v1kj_2[data-v-6f9d99e4]: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-6f9d99e4]:hover:before,.x-menu-inner ._menu-item--active_1v1kj_1[data-v-6f9d99e4]: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.5";
+declare const _default: "1.0.0-alpha.8";
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indielayer/ui",
-  "version": "1.0.0-alpha.5",
+  "version": "1.0.0-alpha.8",
   "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"
@@ -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

@@ -108,8 +108,8 @@ export default defineComponent({
               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] : '' },
             },
           }))
         }

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/icon/Icon.vue

@@ -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'
@@ -41,7 +41,7 @@ export default defineComponent({
     const attrs = ref({})
 
     watchEffect(() => {
-      const injectedIcon = icons[props.icon]
+      const injectedIcon = icons && icons[props.icon]
 
       isWrapSVG.value = false
       computedIcon.value = injectedIcon
@@ -70,21 +70,21 @@ export default defineComponent({
     })
 
     function getSVG(svgString: string) {
-      const temp = document.createElement('template')
+      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)
 
-      temp.innerHTML = svgString.trim()
-
-      const [svg] = temp.content.children
-      const names = svg.getAttributeNames()
       const attributes: Record<string, string | null> = {}
 
-      names.forEach((n) => {
-        if (!['height', 'width', 'class'].includes(n)) attributes[n] = svg.getAttribute(n)
+      attrsRaw?.forEach((a) => {
+        const [attribute, value] = a.split('=')
+
+        if (!['height', 'width', 'class'].includes(attribute)) attributes[attribute] = value.replace(/(^"|"$)/g, '')
       })
 
       return {
         attributes,
-        content: svg.innerHTML,
+        content,
       }
     }
 

package/src/components/input/Input.vue

@@ -39,6 +39,7 @@ export default defineComponent({
       default: 'text',
     },
     inputClass: String,
+    block: Boolean,
   },
 
   emits: useInputtable.emits(),
@@ -112,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"
@@ -157,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,
   },
@@ -53,25 +60,26 @@ export default defineComponent({
     }))
 
     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>

package/src/components/tab/TabGroup.vue

@@ -1,6 +1,7 @@
 <script lang="ts">
-import { defineComponent, reactive, computed, provide, type PropType, ref, watch, onMounted } from 'vue'
+import { defineComponent, reactive, computed, provide, type PropType, ref, watch, onMounted, watchEffect } from 'vue'
 import { injectTabKey } from '../../composables/keys'
+import { useCommon } from '../../composables/common'
 import { useCSS } from '../../composables/css'
 import { useColors } from '../../composables/colors'
 
@@ -16,14 +17,20 @@ export default defineComponent({
   },
 
   props: {
+    ...useCommon.props(),
     ...useColors.props('primary'),
     modelValue: [String, Number],
     variant: {
       type: String as PropType<'line' | 'block'>,
       default: 'line',
     },
+    align: {
+      type: String as PropType<'left' | 'center' | 'right'>,
+      default: 'left',
+    },
     ghost: Boolean,
     grow: Boolean,
+    exact: Boolean,
   },
 
   emits: ['update:modelValue'],
@@ -35,14 +42,23 @@ export default defineComponent({
     const tabsRef = ref<HTMLElement>()
     const tabsContentRef = ref<HTMLElement>()
 
+    const active = ref()
+
+    watchEffect(() => {
+      active.value = props.modelValue
+    })
+
     const state = reactive({
-      active: computed(() => props.modelValue),
+      active: computed(() => active.value),
       variant: computed(() => props.variant),
       ghost: computed(() => props.ghost),
       grow: computed(() => props.grow),
+      exact: computed(() => props.exact),
+      size: computed(() => props.size),
     })
 
     function activateTab(tab: string | number) {
+      active.value = tab
       emit('update:modelValue', tab)
     }
 
@@ -70,14 +86,14 @@ export default defineComponent({
       if (scrollRef.value.scrollEl) scrollRef.value.scrollEl.scrollTo({ left: center, behavior: 'smooth' })
     }, 100)
 
-    useResizeObserver(wrapperRef, () => { updateTracker(props.modelValue) })
+    useResizeObserver(wrapperRef, () => { updateTracker(active.value) })
 
-    watch(() => props.modelValue, (value) => {
+    watch(() => active.value, (value) => {
       updateTracker(value)
     })
 
     onMounted(() => {
-      updateTracker(props.modelValue)
+      updateTracker(active.value)
     })
 
     const css = useCSS('tabs')
@@ -131,7 +147,9 @@ export default defineComponent({
           :class="{
             'border-b border-gray-200 dark:border-gray-700': variant === 'line',
             'space-x-8': variant === 'line' && !grow,
-            'z-[1]': variant === 'block'
+            'z-[1]': variant === 'block',
+            'justify-center': align === 'center',
+            'justify-end': align === 'right'
           }"
         >
           <slot></slot>

package/src/components/table/Table.vue

@@ -14,6 +14,7 @@ export type Header = {
   align?: Align,
   value: string,
   text: string,
+  width: string | number
 }
 
 export default defineComponent({
@@ -136,6 +137,7 @@ export default defineComponent({
         :text-align="header.align"
         :sort="getSort(header.value, sort)"
         :sortable="header.sortable"
+        :width="header.width"
         @click="header.sortable ? sortHeader(header) : null"
       >
         {{ header.text }}

package/src/components/textarea/Textarea.vue

@@ -23,6 +23,7 @@ export default defineComponent({
       type: String,
       default: 'ltr',
     },
+    rows: Number,
     max: Number,
     maxlength: Number,
     min: Number,
@@ -34,6 +35,7 @@ export default defineComponent({
     },
     preventEnter: Boolean,
     inputClass: String,
+    block: Boolean,
   },
 
   emits: useInputtable.emits(),
@@ -99,7 +101,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"
@@ -140,6 +142,7 @@ export default defineComponent({
       :maxlength="maxlength"
       :min="min"
       :dir="dir"
+      :rows="rows"
       :minlength="minlength"
       :name="name"
       :placeholder="placeholder"

package/src/components/toggle/Toggle.vue

@@ -71,7 +71,7 @@ export default defineComponent({
 
 <template>
   <label
-    class="inline-block mb-1 pb-2"
+    class="inline-block"
     :class="[!disabled ? 'cursor-pointer' : 'cursor-not-allowed']"
   >
     <div class="flex items-center">