@tb-dev/vue 0.3.24 → 0.3.25

package/dist/components/button-icon/types.d.ts

@@ -1,9 +1,9 @@
-import { Component } from 'vue';
+import { Component, HTMLAttributes } from 'vue';
 export interface ButtonIconProps<T extends string> {
-    buttonClass?: string;
-    class?: string;
+    buttonClass?: HTMLAttributes['class'];
+    class?: HTMLAttributes['class'];
     icon: Component;
-    iconClass?: string;
+    iconClass?: HTMLAttributes['class'];
     iconSize?: number;
     to?: T;
 }

package/dist/components/button-link/types.d.ts

@@ -1,10 +1,12 @@
+import { HTMLAttributes } from 'vue';
 import { Option } from '@tb-dev/utils';
 import { ButtonSize, ButtonVariant } from '../button';
 export interface ButtonLinkProps<T extends string> {
-    buttonClass?: string;
+    buttonClass?: HTMLAttributes['class'];
     disabled?: Option<boolean>;
     label?: string;
     size?: ButtonSize;
+    style?: HTMLAttributes['style'];
     to: T;
     variant?: ButtonVariant;
 }

package/dist/components/card/types.d.ts

@@ -1,9 +1,10 @@
+import { HTMLAttributes } from 'vue';
 export interface CardProps {
-    contentClass?: string;
-    descriptionClass?: string;
-    footerClass?: string;
-    headerClass?: string;
-    scrollAreaClass?: string;
+    contentClass?: HTMLAttributes['class'];
+    descriptionClass?: HTMLAttributes['class'];
+    footerClass?: HTMLAttributes['class'];
+    headerClass?: HTMLAttributes['class'];
+    scrollAreaClass?: HTMLAttributes['class'];
     scrollAreaHeight?: number | string;
-    titleClass?: string;
+    titleClass?: HTMLAttributes['class'];
 }

package/dist/components/checkbox/types.d.ts

@@ -1,8 +1,11 @@
+import { HTMLAttributes } from 'vue';
 import { CheckboxRootProps } from 'reka-ui';
 export type CheckboxValue = CheckboxRootProps['modelValue'];
 export interface CheckboxProps {
+    class?: HTMLAttributes['class'];
     defaultValue?: CheckboxRootProps['defaultValue'];
     disabled?: CheckboxRootProps['disabled'];
     label?: string;
     labelClass?: string;
+    style?: HTMLAttributes['style'];
 }

package/dist/components/input/types.d.ts

@@ -1,12 +1,12 @@
 import { Option } from '@tb-dev/utils';
-import { InputHTMLAttributes } from 'vue';
+import { HTMLAttributes, InputHTMLAttributes } from 'vue';
 export interface InputProps {
     autocomplete?: InputHTMLAttributes['autocomplete'];
     autofocus?: InputHTMLAttributes['autofocus'];
-    class?: string;
+    class?: HTMLAttributes['class'];
     disabled?: InputHTMLAttributes['disabled'];
     label?: string;
-    labelClass?: string;
+    labelClass?: HTMLAttributes['class'];
     max?: InputHTMLAttributes['maxlength'];
     min?: InputHTMLAttributes['minlength'];
     modelValue: Option<string>;
@@ -16,5 +16,6 @@ export interface InputProps {
     required?: InputHTMLAttributes['required'];
     size?: InputHTMLAttributes['size'];
     spellcheck?: InputHTMLAttributes['spellcheck'];
+    style?: HTMLAttributes['style'];
     type?: InputHTMLAttributes['type'];
 }

package/dist/components/input-number/types.d.ts

@@ -1,7 +1,8 @@
+import { HTMLAttributes } from 'vue';
 import { Option } from '@tb-dev/utils';
 import { NumberFieldRootProps } from 'reka-ui';
 export interface InputNumberProps {
-    class?: string;
+    class?: HTMLAttributes['class'];
     defaultValue?: number;
     disabled?: boolean;
     disableDecrement?: boolean;
@@ -9,10 +10,11 @@ export interface InputNumberProps {
     disableWheelChange?: NumberFieldRootProps['disableWheelChange'];
     formatOptions?: NumberFieldRootProps['formatOptions'];
     label?: string;
-    labelClass?: string;
+    labelClass?: HTMLAttributes['class'];
     max?: NumberFieldRootProps['max'];
     min?: NumberFieldRootProps['min'];
     modelValue: Option<number>;
     step?: NumberFieldRootProps['step'];
     stepSnapping?: NumberFieldRootProps['stepSnapping'];
+    style?: HTMLAttributes['style'];
 }

package/dist/components/input-text/types.d.ts

@@ -1,10 +1,10 @@
-import { InputHTMLAttributes } from 'vue';
+import { HTMLAttributes, InputHTMLAttributes } from 'vue';
 export interface InputTextProps {
     autocomplete?: InputHTMLAttributes['autocomplete'];
     autofocus?: InputHTMLAttributes['autofocus'];
     disabled?: InputHTMLAttributes['disabled'];
     label?: string;
-    labelClass?: string;
+    labelClass?: HTMLAttributes['class'];
     max?: InputHTMLAttributes['maxlength'];
     min?: InputHTMLAttributes['minlength'];
     onBlur?: () => void;
@@ -13,4 +13,5 @@ export interface InputTextProps {
     required?: InputHTMLAttributes['required'];
     size?: InputHTMLAttributes['size'];
     spellcheck?: InputHTMLAttributes['spellcheck'];
+    style?: HTMLAttributes['style'];
 }

package/dist/components/popover/types.d.ts

@@ -1,4 +1,5 @@
+import { HTMLAttributes } from 'vue';
 export interface PopoverProps {
-    contentClass?: string;
+    contentClass?: HTMLAttributes['class'];
     keepOpen?: boolean;
 }

package/dist/components/select/types.d.ts

@@ -1,14 +1,16 @@
 import { Option } from '@tb-dev/utils';
-import { SelectHTMLAttributes } from 'vue';
+import { HTMLAttributes, SelectHTMLAttributes } from 'vue';
 export interface SelectProps {
     autocomplete?: SelectHTMLAttributes['autocomplete'];
     autofocus?: SelectHTMLAttributes['autofocus'];
-    contentClass?: string;
+    class?: HTMLAttributes['class'];
+    contentClass?: HTMLAttributes['class'];
     disabled?: boolean;
     label?: string;
-    labelClass?: string;
+    labelClass?: HTMLAttributes['class'];
     modelValue: Option<string>;
     placeholder?: string;
     required?: boolean;
-    triggerClass?: string;
+    style?: HTMLAttributes['style'];
+    triggerClass?: HTMLAttributes['class'];
 }

package/dist/components/switch/types.d.ts

@@ -1,6 +1,9 @@
+import { HTMLAttributes } from 'vue';
 export interface SwitchProps {
+    class?: HTMLAttributes['class'];
     disabled?: boolean;
     label?: string;
-    labelClass?: string;
+    labelClass?: HTMLAttributes['class'];
     position?: 'after' | 'before';
+    style?: HTMLAttributes['style'];
 }

package/dist/components/textarea/types.d.ts

@@ -1,15 +1,15 @@
 import { Option } from '@tb-dev/utils';
-import { TextareaHTMLAttributes } from 'vue';
+import { HTMLAttributes, TextareaHTMLAttributes } from 'vue';
 export interface TextareaProps {
     autocapitalize?: TextareaHTMLAttributes['autocapitalize'];
     autocomplete?: TextareaHTMLAttributes['autocomplete'];
     autocorrect?: TextareaHTMLAttributes['autocorrect'];
     autofocus?: TextareaHTMLAttributes['autofocus'];
-    class?: string;
+    class?: HTMLAttributes['class'];
     cols?: TextareaHTMLAttributes['cols'];
     disabled?: boolean;
     label?: string;
-    labelClass?: string;
+    labelClass?: HTMLAttributes['class'];
     max?: TextareaHTMLAttributes['maxlength'];
     min?: TextareaHTMLAttributes['minlength'];
     modelValue: Option<string>;
@@ -19,4 +19,5 @@ export interface TextareaProps {
     required?: TextareaHTMLAttributes['required'];
     rows?: TextareaHTMLAttributes['rows'];
     spellcheck?: TextareaHTMLAttributes['spellcheck'];
+    style?: HTMLAttributes['style'];
 }

package/dist/index.js

@@ -191,12 +191,16 @@ const buttonVariants = cva(
 const _hoisted_1$j = { key: 0 };
 const _hoisted_2$2 = { key: 0 };
 const _sfc_main$2X = /* @__PURE__ */ defineComponent({
+  ...{
+    inheritAttrs: false
+  },
   __name: "ButtonLink",
   props: {
     buttonClass: {},
     disabled: {},
     label: {},
     size: { default: "default" },
+    style: {},
     to: {},
     variant: { default: "ghost" }
   },
@@ -210,13 +214,14 @@ const _sfc_main$2X = /* @__PURE__ */ defineComponent({
               variant: _ctx.variant,
               size: _ctx.size,
               disabled: _ctx.disabled,
+              style: _ctx.style,
               class: unref(cn)("size-full", _ctx.buttonClass)
             }), {
               default: withCtx(() => [
                 _ctx.label ? (openBlock(), createElementBlock("span", _hoisted_1$j, toDisplayString(_ctx.label), 1)) : renderSlot(_ctx.$slots, "default", { key: 1 })
               ]),
               _: 3
-            }, 16, ["variant", "size", "disabled", "class"])
+            }, 16, ["variant", "size", "disabled", "style", "class"])
           ]),
           _: 3
         }),
@@ -630,18 +635,24 @@ const _sfc_main$2L = /* @__PURE__ */ defineComponent({
 
 const _hoisted_1$i = { class: "w-full" };
 const _sfc_main$2K = /* @__PURE__ */ defineComponent({
+  ...{
+    inheritAttrs: false
+  },
   __name: "Checkbox",
   props: /* @__PURE__ */ mergeModels({
+    class: {},
     defaultValue: { type: [Boolean, String] },
     disabled: { type: Boolean },
     label: {},
-    labelClass: {}
+    labelClass: {},
+    style: {}
   }, {
     "modelValue": { type: [Boolean, String, null], ...{ required: false } },
     "modelModifiers": {}
   }),
   emits: ["update:modelValue"],
   setup(__props) {
+    const props = __props;
     const value = useModel(__props, "modelValue");
     const [DefineTemplate, ReuseTemplate] = createReusableTemplate();
     return (_ctx, _cache) => {
@@ -652,8 +663,10 @@ const _sfc_main$2K = /* @__PURE__ */ defineComponent({
               modelValue: value.value,
               "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => value.value = $event),
               "default-value": _ctx.defaultValue,
-              disabled: _ctx.disabled
-            }), null, 16, ["modelValue", "default-value", "disabled"])
+              disabled: _ctx.disabled,
+              style: _ctx.style,
+              class: props.class
+            }), null, 16, ["modelValue", "default-value", "disabled", "style", "class"])
           ]),
           _: 1
         }),
@@ -2328,6 +2341,9 @@ const _sfc_main$1V = /* @__PURE__ */ defineComponent({
 
 const _hoisted_1$c = { class: "w-full" };
 const _sfc_main$1U = /* @__PURE__ */ defineComponent({
+  ...{
+    inheritAttrs: false
+  },
   __name: "Input",
   props: {
     autocomplete: {},
@@ -2345,6 +2361,7 @@ const _sfc_main$1U = /* @__PURE__ */ defineComponent({
     required: {},
     size: {},
     spellcheck: { default: "false" },
+    style: {},
     type: { default: "text" }
   },
   emits: ["update:modelValue"],
@@ -2376,9 +2393,10 @@ const _sfc_main$1U = /* @__PURE__ */ defineComponent({
               required: _ctx.required,
               size: _ctx.size,
               spellcheck: _ctx.spellcheck,
+              style: _ctx.style,
               class: unref(cn)("focus-visible:ring-0 disabled:cursor-default", props.class),
               onBlur: _ctx.onBlur
-            }), null, 16, ["modelValue", "type", "autocomplete", "autofocus", "placeholder", "disabled", "maxlength", "minlength", "readonly", "required", "size", "spellcheck", "class", "onBlur"])
+            }), null, 16, ["modelValue", "type", "autocomplete", "autofocus", "placeholder", "disabled", "maxlength", "minlength", "readonly", "required", "size", "spellcheck", "style", "class", "onBlur"])
           ]),
           _: 1
         }),
@@ -2550,6 +2568,9 @@ const _sfc_main$1P = /* @__PURE__ */ defineComponent({
 
 const _hoisted_1$b = { class: "w-full" };
 const _sfc_main$1O = /* @__PURE__ */ defineComponent({
+  ...{
+    inheritAttrs: false
+  },
   __name: "InputNumber",
   props: {
     class: {},
@@ -2565,7 +2586,8 @@ const _sfc_main$1O = /* @__PURE__ */ defineComponent({
     min: {},
     modelValue: {},
     step: {},
-    stepSnapping: { type: Boolean }
+    stepSnapping: { type: Boolean },
+    style: {}
   },
   emits: ["update:modelValue"],
   setup(__props, { emit: __emit }) {
@@ -2592,6 +2614,7 @@ const _sfc_main$1O = /* @__PURE__ */ defineComponent({
               max: _ctx.max,
               step: _ctx.step,
               "step-snapping": _ctx.stepSnapping,
+              style: _ctx.style,
               class: unref(cn)("w-full", props.class)
             }), {
               default: withCtx(() => [
@@ -2609,7 +2632,7 @@ const _sfc_main$1O = /* @__PURE__ */ defineComponent({
                 })
               ]),
               _: 1
-            }, 16, ["modelValue", "default-value", "disabled", "disable-wheel-change", "format-options", "min", "max", "step", "step-snapping", "class"])
+            }, 16, ["modelValue", "default-value", "disabled", "disable-wheel-change", "format-options", "min", "max", "step", "step-snapping", "style", "class"])
           ]),
           _: 1
         }),
@@ -2629,6 +2652,9 @@ const _sfc_main$1O = /* @__PURE__ */ defineComponent({
 });
 
 const _sfc_main$1N = /* @__PURE__ */ defineComponent({
+  ...{
+    inheritAttrs: false
+  },
   __name: "InputText",
   props: /* @__PURE__ */ mergeModels({
     autocomplete: {},
@@ -2643,7 +2669,8 @@ const _sfc_main$1N = /* @__PURE__ */ defineComponent({
     readonly: {},
     required: {},
     size: {},
-    spellcheck: { default: "false" }
+    spellcheck: { default: "false" },
+    style: {}
   }, {
     "modelValue": { required: true },
     "modelModifiers": {}
@@ -2668,8 +2695,9 @@ const _sfc_main$1N = /* @__PURE__ */ defineComponent({
         readonly: _ctx.readonly,
         required: _ctx.required,
         size: _ctx.size,
-        spellcheck: _ctx.spellcheck
-      }, null, 8, ["modelValue", "autocomplete", "autofocus", "disabled", "label", "label-class", "max", "min", "on-blur", "placeholder", "readonly", "required", "size", "spellcheck"]);
+        spellcheck: _ctx.spellcheck,
+        style: normalizeStyle(_ctx.style)
+      }, null, 8, ["modelValue", "autocomplete", "autofocus", "disabled", "label", "label-class", "max", "min", "on-blur", "placeholder", "readonly", "required", "size", "spellcheck", "style"]);
     };
   }
 });
@@ -4127,10 +4155,14 @@ const _sfc_main$14 = /* @__PURE__ */ defineComponent({
 const _hoisted_1$5 = { class: "flex w-full items-center justify-center gap-2" };
 const _hoisted_2$1 = { class: "w-full" };
 const _sfc_main$13 = /* @__PURE__ */ defineComponent({
+  ...{
+    inheritAttrs: false
+  },
   __name: "Select",
   props: {
     autocomplete: {},
     autofocus: {},
+    class: {},
     contentClass: {},
     disabled: { type: Boolean },
     label: {},
@@ -4138,6 +4170,7 @@ const _sfc_main$13 = /* @__PURE__ */ defineComponent({
     modelValue: {},
     placeholder: {},
     required: { type: Boolean },
+    style: {},
     triggerClass: {}
   },
   emits: ["update:modelValue"],
@@ -4161,7 +4194,9 @@ const _sfc_main$13 = /* @__PURE__ */ defineComponent({
                 autocomplete: _ctx.autocomplete,
                 autofocus: _ctx.autofocus,
                 disabled: _ctx.disabled,
-                required: _ctx.required
+                required: _ctx.required,
+                style: _ctx.style,
+                class: props.class
               }), {
                 default: withCtx(() => [
                   createVNode(unref(_sfc_main$15), {
@@ -4182,7 +4217,7 @@ const _sfc_main$13 = /* @__PURE__ */ defineComponent({
                   }, 8, ["class"])
                 ]),
                 _: 3
-              }, 16, ["modelValue", "autocomplete", "autofocus", "disabled", "required"]),
+              }, 16, ["modelValue", "autocomplete", "autofocus", "disabled", "required", "style", "class"]),
               renderSlot(_ctx.$slots, "action")
             ])
           ]),
@@ -5602,18 +5637,24 @@ const _hoisted_1$3 = {
   class: "w-full"
 };
 const _sfc_main$o = /* @__PURE__ */ defineComponent({
+  ...{
+    inheritAttrs: false
+  },
   __name: "Switch",
   props: /* @__PURE__ */ mergeModels({
+    class: {},
     disabled: { type: Boolean },
     label: {},
     labelClass: {},
-    position: { default: "before" }
+    position: { default: "before" },
+    style: {}
   }, {
     "modelValue": { type: Boolean, ...{ required: true } },
     "modelModifiers": {}
   }),
   emits: ["update:modelValue"],
   setup(__props) {
+    const props = __props;
     const toggled = useModel(__props, "modelValue");
     const [DefineTemplate, ReuseTemplate] = createReusableTemplate();
     return (_ctx, _cache) => {
@@ -5623,7 +5664,9 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
             createVNode(unref(_sfc_main$p), mergeProps(_ctx.$attrs, {
               modelValue: toggled.value,
               "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => toggled.value = $event),
-              disabled: _ctx.disabled
+              disabled: _ctx.disabled,
+              style: _ctx.style,
+              class: props.class
             }), createSlots({ _: 2 }, [
               _ctx.$slots.thumb ? {
                 name: "thumb",
@@ -5632,7 +5675,7 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
                 ]),
                 key: "0"
               } : void 0
-            ]), 1040, ["modelValue", "disabled"])
+            ]), 1040, ["modelValue", "disabled", "style", "class"])
           ]),
           _: 3
         }),
@@ -6241,6 +6284,9 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
 
 const _hoisted_1 = { class: "w-full" };
 const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  ...{
+    inheritAttrs: false
+  },
   __name: "Textarea",
   props: {
     autocapitalize: {},
@@ -6260,7 +6306,8 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     readonly: {},
     required: {},
     rows: {},
-    spellcheck: { default: "false" }
+    spellcheck: { default: "false" },
+    style: {}
   },
   emits: ["update:modelValue"],
   setup(__props, { emit: __emit }) {
@@ -6293,12 +6340,13 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
               required: _ctx.required,
               rows: _ctx.rows,
               spellcheck: _ctx.spellcheck,
+              style: _ctx.style,
               class: unref(cn)(
                 "size-full resize-none font-normal focus-visible:ring-0 disabled:cursor-default",
                 props.class
               ),
               onBlur: _ctx.onBlur
-            }), null, 16, ["modelValue", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "cols", "disabled", "maxlength", "minlength", "placeholder", "readonly", "required", "rows", "spellcheck", "class", "onBlur"])
+            }), null, 16, ["modelValue", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "cols", "disabled", "maxlength", "minlength", "placeholder", "readonly", "required", "rows", "spellcheck", "style", "class", "onBlur"])
           ]),
           _: 1
         }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tb-dev/vue",
-  "version": "0.3.24",
+  "version": "0.3.25",
   "description": "Vue utilities",
   "license": "MIT",
   "type": "module",