windly-ui 1.0.1 → 1.0.3

package/dist/runtime/components/Input.vue

@@ -0,0 +1,233 @@
+<script setup>
+import { computed, ref } from "vue";
+const props = defineProps({
+  modelValue: { type: [String, Number], required: true, default: "" },
+  label: { type: String, required: true },
+  hint: { type: String, required: false, default: "" },
+  placeholder: { type: String, required: false, default: "" },
+  case: { type: [String, null], required: false, default: null },
+  size: { type: String, required: false, default: "md" },
+  color: { type: String, required: false, default: "primary" },
+  rounded: { type: String, required: false, default: "md" },
+  dense: { type: Boolean, required: false, default: false },
+  outlined: { type: Boolean, required: false, default: false },
+  borderless: { type: Boolean, required: false, default: false },
+  flat: { type: Boolean, required: false, default: false },
+  type: { type: String, required: false, default: "text" },
+  allow: { type: Array, required: false, default: () => [] },
+  deny: { type: Array, required: false, default: () => [] },
+  supportedValues: { type: Array, required: false, default: () => [] },
+  unsupportedValues: { type: Array, required: false, default: () => [] },
+  required: { type: Boolean, required: false, default: false },
+  regex: { type: null, required: false, default: "" },
+  minLength: { type: Number, required: false, default: void 0 },
+  maxLength: { type: Number, required: false, default: void 0 },
+  disabled: { type: Boolean, required: false, default: false },
+  readonly: { type: Boolean, required: false, default: false },
+  autocomplete: { type: String, required: false, default: "off" },
+  validateOn: { type: String, required: false, default: "input" }
+});
+const emit = defineEmits(["update:modelValue", "valid", "invalid"]);
+const validationError = ref("");
+const NATIVE_PATTERNS = {
+  email: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
+  url: /^(https?:\/\/)?([\w-]+\.)+[\w-]{2,}(\/\S*)?$/i,
+  tel: /^\+?[1-9]\d{6,14}$/
+};
+const RULE_PATTERNS = {
+  alphabets: /^[A-Za-z]+$/,
+  numbers: /^[0-9]+$/,
+  spaces: /\s/,
+  name: /^[A-Za-z.'-\s]+$/,
+  punctuation: /[.,!?;:'"()-]/,
+  integer: /^-?\d+$/,
+  positive: /^\d+$/,
+  negative: /^-\d+$/,
+  decimal: /^-?\d*\.?\d+$/,
+  scientific: /^-?\d+(\.\d+)?e[-+]?\d+$/i,
+  uppercase: /^[A-Z]+$/,
+  lowercase: /^[a-z]+$/
+};
+function validate(value) {
+  validationError.value = "";
+  if (props.required && !value.trim()) {
+    validationError.value = "This field is required.";
+    return false;
+  }
+  if (props.minLength !== void 0 && value.length < props.minLength) {
+    validationError.value = `Minimum ${props.minLength} characters required.`;
+    return false;
+  }
+  if (props.maxLength !== void 0 && value.length > props.maxLength) {
+    validationError.value = `Maximum ${props.maxLength} characters allowed.`;
+    return false;
+  }
+  if (props.supportedValues.length && !props.supportedValues.includes(value)) {
+    validationError.value = "Value is not allowed.";
+    return false;
+  }
+  if (props.unsupportedValues.includes(value)) {
+    validationError.value = "Value is not permitted.";
+    return false;
+  }
+  const nativePattern = NATIVE_PATTERNS[props.type];
+  if (nativePattern && value && !nativePattern.test(value)) {
+    validationError.value = `Invalid ${props.type} format.`;
+    return false;
+  }
+  for (const rule of props.allow) {
+    const regex = RULE_PATTERNS[rule];
+    if (regex && value && !regex.test(value)) {
+      validationError.value = `Failed validation: ${rule}`;
+      return false;
+    }
+  }
+  for (const rule of props.deny) {
+    const regex = RULE_PATTERNS[rule];
+    if (regex && regex.test(value)) {
+      validationError.value = `Contains unsupported value: ${rule}`;
+      return false;
+    }
+  }
+  if (props.regex) {
+    const regex = props.regex instanceof RegExp ? props.regex : new RegExp(props.regex);
+    if (!regex.test(value)) {
+      validationError.value = "Custom validation failed.";
+      return false;
+    }
+  }
+  return true;
+}
+function runValidation(value) {
+  const isValid = validate(value);
+  if (isValid) {
+    emit("valid");
+  } else {
+    emit("invalid", validationError.value);
+  }
+  return isValid;
+}
+function handleInput(event) {
+  const target = event.target;
+  let value = target.value;
+  if (props.maxLength !== void 0 && value.length > props.maxLength) {
+    value = value.slice(0, props.maxLength);
+  }
+  emit("update:modelValue", value);
+  if (props.validateOn === "input") {
+    runValidation(value);
+  }
+}
+function handleBlur(event) {
+  if (props.validateOn !== "blur") return;
+  const target = event.target;
+  runValidation(target.value);
+}
+const isHex = (val) => val.startsWith("#");
+const roundedMap = {
+  none: "rounded-none",
+  sm: "rounded-sm",
+  md: "rounded-md",
+  lg: "rounded-lg",
+  xl: "rounded-xl",
+  full: "rounded-full"
+};
+const computedClass = computed(() => {
+  let classes = "input block w-full transition-all duration-300";
+  if (props.borderless) {
+    classes += " border-none bg-transparent";
+  } else if (props.outlined) {
+    classes += " border";
+  } else {
+    classes += " border-0 border-b";
+  }
+  classes += ` ${roundedMap[props.rounded] ?? roundedMap.md}`;
+  if (!props.flat) {
+    classes += " shadow-sm";
+  }
+  if (props.disabled) {
+    classes += " opacity-50 cursor-not-allowed";
+  }
+  if (props.size === "sm") {
+    classes += " text-sm";
+  } else if (props.size === "lg") {
+    classes += " text-lg";
+  } else {
+    classes += " text-base";
+  }
+  if (props.case === "upper") {
+    classes += " uppercase";
+  } else if (props.case === "lower") {
+    classes += " lowercase";
+  } else if (props.case === "capitalize") {
+    classes += " capitalize";
+  }
+  if (validationError.value) {
+    classes += " border-red-500";
+  } else {
+    classes += ` ${props.color && !isHex(props.color) ? `border-${props.color} focus:ring-${props.color} text-${props.color}  ` : ""}`;
+  }
+  if (props.modelValue !== null && props.modelValue !== "" && props.modelValue !== void 0)
+    classes += " has-value";
+  return classes;
+});
+const computedStyle = computed(() => {
+  let styles = {};
+  if (props.color && isHex(props.color)) {
+    styles["--tw-ring-color"] = props.color;
+    styles["border-color"] = props.color;
+  }
+  return styles;
+});
+const visibility = ref(false);
+const inputType = computed(() => props.type === "password" ? visibility.value ? "text" : "password" : props.type);
+const inputAttrs = computed(() => {
+  let inputAttrs2 = {};
+  if (props.type) inputAttrs2 = { ...inputAttrs2, type: props.type === "password" ? inputType.value : props.type };
+  if (props.placeholder) inputAttrs2 = { ...inputAttrs2, placeholder: props.placeholder };
+  if (props.disabled) inputAttrs2 = { ...inputAttrs2, disabled: props.disabled };
+  if (props.readonly) inputAttrs2 = { ...inputAttrs2, readonly: props.readonly };
+  if (props.autocomplete) inputAttrs2 = { ...inputAttrs2, autocomplete: props.autocomplete };
+  if (props.required) inputAttrs2 = { ...inputAttrs2, required: props.required };
+  if (props.maxLength) inputAttrs2 = { ...inputAttrs2, maxlength: props.maxLength };
+  return inputAttrs2;
+});
+</script>
+
+<template>
+  <div class="input-container" :class="{ dense: !outlined || dense, [`input-${size}`]: size }">
+    <input
+      :value="modelValue"
+      :class="computedClass"
+      :style="computedStyle"
+      @input="handleInput"
+      @blur="handleBlur"
+      v-bind="inputAttrs"
+    />
+
+    <label class="label" :class="!isHex(color) ? `text-${color}` : ''" :style="isHex(color) ? { color } : {}">
+      {{ label }}
+    </label>
+
+    <div class="absolute right-0 top-1/2 transform -translate-y-1/2">
+      <UIButton v-if="type === 'password'" :icon="visibility ? 'visibility_off' : 'visibility'" flat dense color="gray-400"  @click="visibility = !visibility" />
+    </div>
+    <p
+      v-if="hint && !validationError"
+      class="hint-text"
+    >
+      {{ hint }}
+    </p>
+
+    <p
+      v-if="validationError"
+      class="error-text"
+    >
+      {{ validationError }}
+    </p>
+  </div>
+</template>
+
+<style scoped>
+.input-container{margin:20px 0 10px;position:relative}.input-container.dense{margin:10px 0}.input-container .input{padding:10px}.input-container.dense .input{padding:6px 10px}.input:focus{outline:none}.label{color:#9ca3af;left:10px;padding:0 5px;pointer-events:none;position:absolute;top:50%;transform:translateY(-50%);transition:top .2s ease,font-size .2s ease,color .2s ease,transform .2s ease}.input-container:has(input[type=date]) .label,.input-container:has(input[type=datetime-local]) .label,.input-container:has(input[type=month]) .label,.input-container:has(input[type=time]) .label,.input-container:has(input[type=week]) .label{color:gray;left:5px;top:-20%;transform:none;z-index:1}.input-container.input-lg.dense .input:-moz-placeholder+.label,.input:-moz-placeholder+.label{color:gray;left:5px;top:-20px;transform:none;z-index:1}.input-container.input-lg.dense .input.has-value+.label,.input-container.input-lg.dense .input:focus+.label,.input-container.input-lg.dense .input:placeholder-shown+.label,.input.has-value+.label,.input:focus+.label,.input:placeholder-shown+.label{color:gray;left:5px;top:-20px;transform:none;z-index:1}.input-container.dense .input:-moz-placeholder+.label{top:-10px}.input-container.dense .input.has-value+.label,.input-container.dense .input:focus+.label,.input-container.dense .input:placeholder-shown+.label{top:-10px}.input-container.input-lg .input:-moz-placeholder+.label{top:-24px}.input-container.input-lg .input.has-value+.label,.input-container.input-lg .input:focus+.label,.input-container.input-lg .input:placeholder-shown+.label{top:-24px}.input-container.input-sm .label{font-size:14px}.input-container.input-md .label{font-size:16px}.input-container.input-lg .label{font-size:18px}.input-container.input-sm .input:-moz-placeholder+.label{font-size:12px}.input-container.input-sm .input.has-value+.label,.input-container.input-sm .input:focus+.label,.input-container.input-sm .input:placeholder-shown+.label{font-size:12px}.input-container.input-md .input:-moz-placeholder+.label{font-size:14px}.input-container.input-md .input.has-value+.label,.input-container.input-md .input:focus+.label,.input-container.input-md .input:placeholder-shown+.label{font-size:14px}.input-container.input-lg .input:-moz-placeholder+.label{font-size:16px}.input-container.input-lg .input.has-value+.label,.input-container.input-lg .input:focus+.label,.input-container.input-lg .input:placeholder-shown+.label{font-size:16px}.hint-text{color:#6b7280;font-size:12px;margin-left:5px}.char-count{color:#6b7280}.char-count,.error-text{font-size:.875rem;margin-top:4px}.error-text{color:#ef4444}
+</style>

package/dist/runtime/components/Input.vue.d.ts

@@ -0,0 +1,66 @@
+type SupportedInputType = 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search' | 'date' | 'datetime-local' | 'month' | 'week' | 'time';
+type ValidationRule = "alphabets" | "numbers" | "spaces" | "name" | "punctuation" | "integer" | "positive" | "negative" | "decimal" | "scientific" | "uppercase" | "lowercase";
+type ValidateOn = "input" | "blur";
+type __VLS_Props = {
+    modelValue: string | number;
+    label: string;
+    hint?: string;
+    placeholder?: string;
+    case?: "upper" | "lower" | "capitalize" | "normal" | null;
+    size?: string;
+    color?: string;
+    rounded?: string;
+    dense?: boolean;
+    outlined?: boolean;
+    borderless?: boolean;
+    flat?: boolean;
+    type?: SupportedInputType;
+    allow?: ValidationRule[];
+    deny?: ValidationRule[];
+    supportedValues?: Array<string | number>;
+    unsupportedValues?: Array<string | number>;
+    required?: boolean;
+    regex?: string | RegExp;
+    minLength?: number;
+    maxLength?: number;
+    disabled?: boolean;
+    readonly?: boolean;
+    autocomplete?: string;
+    validateOn?: ValidateOn;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: string) => any;
+    invalid: (error: string) => any;
+    valid: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    onInvalid?: ((error: string) => any) | undefined;
+    onValid?: (() => any) | undefined;
+}>, {
+    modelValue: string | number;
+    disabled: boolean;
+    dense: boolean;
+    type: SupportedInputType;
+    color: string;
+    rounded: string;
+    size: string;
+    required: boolean;
+    flat: boolean;
+    placeholder: string;
+    readonly: boolean;
+    hint: string;
+    case: "upper" | "lower" | "capitalize" | "normal" | null;
+    outlined: boolean;
+    borderless: boolean;
+    allow: ValidationRule[];
+    deny: ValidationRule[];
+    supportedValues: Array<string | number>;
+    unsupportedValues: Array<string | number>;
+    regex: string | RegExp;
+    minLength: number;
+    maxLength: number;
+    autocomplete: string;
+    validateOn: ValidateOn;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/Radio.d.vue.ts

@@ -0,0 +1,41 @@
+type LabelPosition = 'top' | 'bottom' | 'left' | 'right';
+type RadioSize = 'sm' | 'md' | 'lg';
+type Rounded = 'none' | 'sm' | 'md' | 'lg' | 'full';
+type __VLS_Props = {
+    modelValue?: string | number | boolean;
+    value: string | number | boolean;
+    label: string;
+    id?: string;
+    name?: string;
+    hint?: string;
+    icon?: string;
+    disable?: boolean;
+    color?: string;
+    size?: RadioSize;
+    rounded?: Rounded;
+    flat?: boolean;
+    bordered?: boolean;
+    borderColor?: string;
+    labelPosition?: LabelPosition;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: string | number | boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | number | boolean) => any) | undefined;
+}>, {
+    modelValue: string | number | boolean;
+    name: string;
+    disable: boolean;
+    color: string;
+    rounded: Rounded;
+    size: RadioSize;
+    borderColor: string;
+    icon: string;
+    flat: boolean;
+    id: string;
+    bordered: boolean;
+    hint: string;
+    labelPosition: LabelPosition;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/Radio.vue

@@ -0,0 +1,222 @@
+<script setup>
+defineOptions({
+  name: "UIRadio"
+});
+import { computed } from "vue";
+const props = defineProps({
+  modelValue: { type: [String, Number, Boolean], required: false, default: "" },
+  value: { type: [String, Number, Boolean], required: true },
+  label: { type: String, required: true },
+  id: { type: String, required: false, default: void 0 },
+  name: { type: String, required: false, default: "" },
+  hint: { type: String, required: false, default: "" },
+  icon: { type: String, required: false, default: "" },
+  disable: { type: Boolean, required: false, default: false },
+  color: { type: String, required: false, default: "blue-500" },
+  size: { type: String, required: false, default: "md" },
+  rounded: { type: String, required: false, default: "full" },
+  flat: { type: Boolean, required: false, default: false },
+  bordered: { type: Boolean, required: false, default: true },
+  borderColor: { type: String, required: false, default: "gray-300" },
+  labelPosition: { type: String, required: false, default: "right" }
+});
+const emit = defineEmits(["update:modelValue"]);
+const isHex = (val) => {
+  return val.startsWith("#") || val.startsWith("rgb") || val.startsWith("hsl");
+};
+const isChecked = computed(
+  () => props.modelValue === props.value
+);
+const sizeClasses = computed(
+  () => {
+    switch (props.size) {
+      case "sm":
+        return {
+          radio: "w-4 h-4",
+          icon: "text-sm"
+        };
+      case "lg":
+        return {
+          radio: "w-6 h-6",
+          icon: "text-lg"
+        };
+      case "md":
+      default:
+        return {
+          radio: "w-5 h-5",
+          icon: "text-base"
+        };
+    }
+  }
+);
+const roundedClass = computed(
+  () => {
+    const map = {
+      none: "rounded-none",
+      sm: "rounded-sm",
+      md: "rounded-md",
+      lg: "rounded-lg",
+      full: "rounded-full"
+    };
+    return map[props.rounded];
+  }
+);
+const labelPositionClass = computed(() => {
+  const map = {
+    top: "flex-col-reverse",
+    bottom: "flex-col",
+    left: "flex-row-reverse",
+    right: "flex-row"
+  };
+  return map[props.labelPosition];
+});
+const radioClasses = computed(
+  () => [
+    "inline-flex items-center justify-center border-2 transition-all duration-200 bg-white dark:bg-gray-900",
+    sizeClasses.value.radio,
+    roundedClass.value,
+    props.flat ? "shadow-none" : "shadow-sm",
+    props.disable ? "opacity-50" : "",
+    props.bordered && !isHex(
+      props.borderColor
+    ) ? `border-${props.borderColor}` : "",
+    isChecked.value && !isHex(props.color) ? `border-${props.color} text-${props.color}` : "",
+    !isChecked.value ? "border-gray-300" : ""
+  ]
+);
+const radioStyle = computed(
+  () => {
+    const style = {};
+    if (props.bordered && isHex(
+      props.borderColor
+    )) {
+      style.borderColor = props.borderColor;
+    }
+    if (isChecked.value && isHex(props.color)) {
+      style.borderColor = props.color;
+      style.color = props.color;
+    }
+    return style;
+  }
+);
+const iconClasses = computed(
+  () => [
+    "material-icons transition-opacity duration-200",
+    sizeClasses.value.icon,
+    isChecked.value ? "opacity-100" : "opacity-0",
+    !isHex(props.color) ? `text-${props.color}` : ""
+  ]
+);
+const iconStyle = computed(
+  () => {
+    const style = {};
+    if (isHex(props.color)) {
+      style.color = props.color;
+    }
+    return style;
+  }
+);
+const toggle = () => {
+  if (props.disable)
+    return;
+  emit(
+    "update:modelValue",
+    props.value
+  );
+};
+</script>
+
+<template>
+  <div
+    class="radio-container flex items-center"
+  >
+    <input
+      :id="id"
+      type="radio"
+      :name="name"
+      :value="value"
+      :checked="
+  isChecked
+"
+      :disabled="
+  disable
+"
+      class="sr-only"
+      @change="toggle"
+    >
+
+    <label
+      :for="id"
+      tabindex="0"
+      role="radio"
+      :aria-checked="
+  isChecked
+"
+      :aria-disabled="
+  disable
+"
+      :class="[
+  'flex items-center cursor-pointer select-none',
+  labelPositionClass,
+  {
+    'opacity-50 pointer-events-none': disable
+  }
+]"
+      @click.prevent="
+  toggle
+"
+      @keydown.enter.prevent="
+  toggle
+"
+      @keydown.space.prevent="
+  toggle
+"
+    >
+      <!-- Radio -->
+      <span
+        :class="
+  radioClasses
+"
+        :style="
+  radioStyle
+"
+      >
+        <i
+          v-if="
+  icon && isChecked
+"
+          :class="
+  iconClasses
+"
+          :style="
+  iconStyle
+"
+        >
+          {{ icon }}
+        </i>
+        <span
+          v-else
+          class="block m-auto rounded-full"
+          :class="
+  [
+    !isHex(props.color) && isChecked ? `bg-${props.color}` : '',
+    size === 'sm' ? 'w-2 h-2' : size === 'lg' ? 'w-3 h-3' : 'w-2.5 h-2.5'
+  ]
+"
+          :style="isHex(props.color) ? { backgroundColor: props.color } : {}"
+        />
+      </span>
+
+      <!-- Label -->
+      <span
+        class="mx-2 font-medium text-gray-700 dark:text-gray-300"
+      >
+        {{ label }}
+      </span>
+    </label>
+  </div>
+</template>
+
+<style scoped>
+.radio-container{-webkit-user-select:none;-moz-user-select:none;user-select:none}
+</style>

package/dist/runtime/components/Radio.vue.d.ts

@@ -0,0 +1,41 @@
+type LabelPosition = 'top' | 'bottom' | 'left' | 'right';
+type RadioSize = 'sm' | 'md' | 'lg';
+type Rounded = 'none' | 'sm' | 'md' | 'lg' | 'full';
+type __VLS_Props = {
+    modelValue?: string | number | boolean;
+    value: string | number | boolean;
+    label: string;
+    id?: string;
+    name?: string;
+    hint?: string;
+    icon?: string;
+    disable?: boolean;
+    color?: string;
+    size?: RadioSize;
+    rounded?: Rounded;
+    flat?: boolean;
+    bordered?: boolean;
+    borderColor?: string;
+    labelPosition?: LabelPosition;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: string | number | boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | number | boolean) => any) | undefined;
+}>, {
+    modelValue: string | number | boolean;
+    name: string;
+    disable: boolean;
+    color: string;
+    rounded: Rounded;
+    size: RadioSize;
+    borderColor: string;
+    icon: string;
+    flat: boolean;
+    id: string;
+    bordered: boolean;
+    hint: string;
+    labelPosition: LabelPosition;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/ScrollArea.d.vue.ts

@@ -0,0 +1,79 @@
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    width: {
+        type: StringConstructor;
+        default: string;
+    };
+    height: {
+        type: StringConstructor;
+        default: string;
+    };
+    maxWidth: {
+        type: StringConstructor;
+        default: string;
+    };
+    maxHeight: {
+        type: StringConstructor;
+        default: string;
+    };
+    horizontal: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    vertical: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hideScrollbar: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    width: {
+        type: StringConstructor;
+        default: string;
+    };
+    height: {
+        type: StringConstructor;
+        default: string;
+    };
+    maxWidth: {
+        type: StringConstructor;
+        default: string;
+    };
+    maxHeight: {
+        type: StringConstructor;
+        default: string;
+    };
+    horizontal: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    vertical: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hideScrollbar: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    horizontal: boolean;
+    vertical: boolean;
+    width: string;
+    maxWidth: string;
+    height: string;
+    maxHeight: string;
+    hideScrollbar: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};