\n \n\n\n\n","import { buildProps } from '@vuesax-alpha/utils'\n\nimport type { ExtractPropTypes } from 'vue'\nimport type AvatarGroup from './avatar-group.vue'\n\nexport const avatarGroupProps = buildProps({\n /**\n * change the way the avatar is composed by placing one next to the other.\n */\n float: {\n type: Boolean,\n },\n /**\n * determine how many avatars are visible.\n */\n max: {\n type: [String, Number],\n },\n} as const)\n\nexport type AvatarGroupProps = ExtractPropTypes\nexport type AvatarGroupInstance = InstanceType\n","\n
\n \n
\n\n\n\n","import { withInstall, withNoopInstall } from '@vuesax-alpha/utils'\n\nimport Avatar from './src/avatar.vue'\nimport AvatarGroup from './src/avatar-group.vue'\n\nexport const VsAvatar = withInstall(Avatar, {\n AvatarGroup,\n})\nexport default VsAvatar\n\nexport const VsAvatarGroup = withNoopInstall(AvatarGroup)\n\nexport * from './src/avatar-group'\nexport * from './src/avatar'\n","import { buildProps, definePropType } from '@vuesax-alpha/utils'\nimport type { ExtractPropTypes, StyleValue } from 'vue'\n\nexport const badgeProps = buildProps({\n /**\n * @description display value.\n */\n value: {\n type: [String, Number],\n default: '',\n },\n /**\n * @description maximum value, shows `{max}+` when exceeded. Only works if value is a number.\n */\n max: {\n type: Number,\n default: 99,\n },\n /**\n * @description if a little dot is displayed.\n */\n isDot: Boolean,\n /**\n * @description hidden badge.\n */\n hidden: Boolean,\n /**\n * @description badge type.\n */\n type: {\n type: String,\n values: ['primary', 'success', 'warn', 'info', 'danger'],\n default: 'danger',\n },\n /**\n * @description whether to show badge when value is zero.\n */\n showZero: {\n type: Boolean,\n default: true,\n },\n /**\n * @description choose true to display a loading animation.\n */\n processing: Boolean,\n /**\n * @description customize dot background color\n */\n color: String,\n /**\n * @description CSS style of badge\n */\n badgeStyle: {\n type: definePropType([String, Object, Array]),\n },\n /**\n * @description set offset of the badge\n */\n offset: {\n type: definePropType<[number, number]>(Array),\n default: [0, 0],\n },\n /**\n * @description custom class name of badge\n */\n badgeClass: {\n type: String,\n },\n} as const)\nexport type BadgeProps = ExtractPropTypes\n","\n
\n \n \n \n \n
\n\n\n\n","import { withInstall } from '@vuesax-alpha/utils'\nimport Badge from './src/badge.vue'\n\nexport const VsBadge = withInstall(Badge)\nexport default VsBadge\n\nexport * from './src/badge'\n","\n
\n \n
\n\n\n\n","import { useColorProp } from '@vuesax-alpha/hooks'\nimport { buildProps } from '@vuesax-alpha/utils'\n\nimport type { ExtractPropTypes } from 'vue'\nimport type Button from './button.vue'\n\nexport const buttonTypes = [\n 'default',\n 'border',\n 'flat',\n 'floating',\n 'gradient',\n 'shadow',\n 'relief',\n 'transparent',\n] as const\n\nexport const buttonSizes = ['xl', 'large', 'default', 'small', 'mini'] as const\n\nexport const buttonProps = buildProps({\n /**\n * @description Determine if the component is active and change its style to that state.\n */\n active: { type: Boolean },\n\n /**\n * @description Determine if the animation is active for the user when hovering.\n */\n animateInactive: { type: Boolean },\n\n /**\n * @description Change the type of animation, this property only works if you have the slot animate.\n * @enum `scale` | `rotate` | `vertical`\n */\n animationType: {\n type: String,\n values: ['scale', 'rotate', 'vertical'] as const,\n },\n\n /**\n * @description Change the width of the component to the possible total determined by the parent element.\n */\n block: {\n type: Boolean,\n },\n\n /**\n * @description Component color - Accept Vuesax's color, Hex, rgb\n * @default 'primary'\n */\n color: { ...useColorProp, default: 'primary' },\n\n /**\n * @description Determine if the component contains only one icon,\n * by adding this property the component has an equal width and height.\n */\n icon: {\n type: Boolean,\n },\n\n /**\n * @description Add a loading animation to the avatar.\n */\n loading: { type: Boolean },\n\n /**\n * @description Change the style of the avatar by making it [square | circulating | rounded]\n * @enum | `circle` | `square` |\n */\n shape: {\n type: String,\n values: ['circle', 'square'] as const,\n },\n\n /**\n * @description Change the size of the avatar component.\n * @enum | `xl` | `large` | `default` | `small` | `mini` |\n * @default 'default'\n */\n size: {\n type: [Number, String],\n values: buttonSizes,\n default: 'default',\n },\n\n /**\n * @description ripple style\n * @enum `cut` | `reverse`\n */\n ripple: {\n type: String,\n values: ['cut', 'reverse'] as const,\n },\n\n /**\n * @description Change the style of the component and its states.\n * @enum `default` | `border` | `flat` | `floating` | `gradient` | `shadow` | `relief` | `transparent`\n * @default 'default'\n */\n type: {\n type: String,\n values: buttonTypes,\n default: 'default',\n },\n\n /**\n * Determine if the component has the upload status active\n * by changing the style and adding the animation.\n */\n upload: {\n type: Boolean,\n },\n /** @deprecated @description use prop `type` instead */\n border: { type: Boolean },\n /** @deprecated @description use prop `type` instead */\n flat: { type: Boolean },\n /** @deprecated @description use prop `type` instead */\n floating: { type: Boolean },\n /** @deprecated @description use prop `type` instead */\n gradient: { type: Boolean },\n /** @deprecated @description use prop `type` instead */\n shadow: { type: Boolean },\n /** @deprecated @description use prop `type` instead */\n relief: { type: Boolean },\n /** @deprecated @description use prop `type` instead */\n transparent: { type: Boolean },\n /** @deprecated @description use prop `shape` instead */\n square: { type: Boolean },\n /** @deprecated @description use prop `shape` instead */\n circle: { type: Boolean },\n /** @deprecated */\n to: { type: [String, Object] },\n /** @deprecated */\n href: { type: String },\n /** @deprecated */\n blank: { type: Boolean },\n} as const)\n\nexport type ButtonProps = ExtractPropTypes\nexport type ButtonInstance = InstanceType\n","\n \n
\n \n
\n\n \n \n \n\n
\n \n
\n \n\n\n\n","import { withInstall, withNoopInstall } from '@vuesax-alpha/utils'\nimport ButtonGroup from './src/button-group.vue'\nimport Button from './src/button.vue'\n\nexport const VsButton = withInstall(Button, {\n ButtonGroup,\n})\nexport default VsButton\n\nexport const VsButtonGroup = withNoopInstall(ButtonGroup)\n\nexport * from './src/button-group'\nexport * from './src/button'\n","import { useColorProp } from '@vuesax-alpha/hooks'\nimport { buildProps } from '@vuesax-alpha/utils'\n\nimport type { ExtractPropTypes } from 'vue'\nimport type Card from './card.vue'\n\nconst cardType = [1, '1', 2, '2', 3, '3', 4, '4', 5, '5'] as const\n\nexport const cardProps = buildProps({\n /**\n * @description Component color - Accept Vuesax's color, Hex, rgb\n */\n color: useColorProp,\n /**\n * @description Card type\n * @enum `1` | `2` | `3` | `4` | `5`\n * @default 1\n */\n type: {\n type: [String, Number],\n values: cardType,\n validator: (val: unknown): val is (typeof cardType)[number] =>\n cardType.includes(val as any),\n default: 1,\n },\n} as const)\n\nexport type CardProps = ExtractPropTypes\nexport type CardInstance = InstanceType\n","\n
\n
\n
\n \n
\n \n
\n
\n\n
\n
\n \n
\n\n \n
\n\n
\n \n
\n
\n
\n\n\n\n","import type { CSSProperties } from 'vue'\nimport type { ThumbProps } from './thumb'\n\nexport const GAP = 4 // top 2 + bottom 2 of bar instance\n\nexport const BAR_MAP = {\n vertical: {\n offset: 'offsetHeight',\n scroll: 'scrollTop',\n scrollSize: 'scrollHeight',\n size: 'height',\n key: 'vertical',\n axis: 'Y',\n client: 'clientY',\n direction: 'top',\n },\n horizontal: {\n offset: 'offsetWidth',\n scroll: 'scrollLeft',\n scrollSize: 'scrollWidth',\n size: 'width',\n key: 'horizontal',\n axis: 'X',\n client: 'clientX',\n direction: 'left',\n },\n} as const\n\nexport const renderThumbStyle = ({\n move,\n size,\n bar,\n}: Pick & {\n bar: (typeof BAR_MAP)[keyof typeof BAR_MAP]\n}): CSSProperties => ({\n [bar.size]: size,\n transform: `translate${bar.axis}(${move}%)`,\n})\n","import { buildProps } from '@vuesax-alpha/utils'\nimport type { ExtractPropTypes } from 'vue'\nimport type Thumb from './thumb.vue'\n\nexport const thumbProps = buildProps({\n vertical: { type: Boolean },\n size: { type: String },\n move: { type: Number },\n ratio: {\n type: Number,\n required: true,\n },\n always: { type: Boolean },\n} as const)\nexport type ThumbProps = ExtractPropTypes\n\nexport type ThumbInstance = InstanceType\n","\n \n \n \n \n \n\n\n\n","import { buildProps } from '@vuesax-alpha/utils'\nimport type { ExtractPropTypes } from 'vue'\nimport type Bar from './bar.vue'\n\nexport const barProps = buildProps({\n always: {\n type: Boolean,\n default: true,\n },\n width: { type: String },\n height: { type: String },\n ratioX: {\n type: Number,\n default: 1,\n },\n ratioY: {\n type: Number,\n default: 1,\n },\n thickness: {\n type: [Number, String],\n default: 6,\n },\n} as const)\nexport type BarProps = ExtractPropTypes\n\nexport type BarInstance = InstanceType\n","\n \n \n\n\n","import { buildProps, definePropType, isNumber } from '@vuesax-alpha/utils'\nimport type { ExtractPropTypes, StyleValue } from 'vue'\nimport type Scrollbar from './scrollbar.vue'\n\nexport const scrollbarProps = buildProps({\n /**\n * @description height of scrollbar\n */\n height: {\n type: [String, Number],\n default: '',\n },\n /**\n * @description max height of scrollbar\n */\n maxHeight: {\n type: [String, Number],\n default: '',\n },\n /**\n * @description whether to use the native scrollbar\n */\n native: {\n type: Boolean,\n default: false,\n },\n /**\n * @description style of wrap\n */\n wrapStyle: {\n type: definePropType([String, Object, Array]),\n default: '',\n },\n /**\n * @description class of wrap\n */\n wrapClass: {\n type: [String, Array],\n default: '',\n },\n /**\n * @description class of view\n */\n viewClass: {\n type: [String, Array],\n default: '',\n },\n /**\n * @description style of view\n */\n viewStyle: {\n type: [String, Array, Object],\n default: '',\n },\n /**\n * @description do not respond to container size changes, if the container size does not change, it is better to set it to optimize performance\n */\n noresize: { type: Boolean },\n /**\n * @description element tag of the view\n */\n tag: {\n type: String,\n default: 'div',\n },\n /**\n * @description always show\n */\n always: {\n type: Boolean,\n default: true,\n },\n /**\n * @description minimum size height of scrollbar\n */\n minSize: {\n type: Number,\n default: 20,\n },\n /**\n * @description thickness - thumb width\n */\n thickness: {\n type: [Number, String],\n default: 6,\n },\n} as const)\nexport type ScrollbarProps = ExtractPropTypes\n\nexport type ScrollEmitParams = {\n scrollTop: number\n scrollLeft: number\n}\nexport const scrollbarEmits = {\n scroll: ({ scrollTop, scrollLeft }: ScrollEmitParams) =>\n [scrollTop, scrollLeft].every(isNumber),\n}\nexport type ScrollbarEmits = typeof scrollbarEmits\n\nexport type ScrollbarInstance = InstanceType\n","\n
\n
\n \n \n \n
\n \n \n \n
\n\n\n","import { withInstall } from '@vuesax-alpha/utils'\n\nimport Scrollbar from './src/scrollbar.vue'\n\nexport const VsScrollbar = withInstall(Scrollbar)\nexport default VsScrollbar\n\nexport * from './src/util'\nexport * from './src/scrollbar'\nexport * from './src/thumb'\n","\n
\n \n\n \n \n \n \n\n \n
\n\n\n\n","import { withInstall, withNoopInstall } from '@vuesax-alpha/utils'\nimport Card from './src/card.vue'\nimport CardGroup from './src/card-group.vue'\n\nexport const VsCard = withInstall(Card, {\n CardGroup,\n})\nexport default VsCard\n\nexport const VsCardGroup = withNoopInstall(CardGroup)\n\nexport * from './src/card-group'\nexport * from './src/card'\n","import { useColorProp } from '@vuesax-alpha/hooks'\nimport { UPDATE_MODEL_EVENT } from '@vuesax-alpha/constants'\nimport {\n buildProps,\n definePropType,\n isArray,\n isBoolean,\n isNumber,\n isString,\n} from '@vuesax-alpha/utils'\nimport type { EmitFn } from '@vuesax-alpha/utils'\n\nimport type { ExtractPropTypes } from 'vue'\nimport type Checkbox from './checkbox.vue'\n\nexport type CheckboxValueType = string | number | boolean | object\n\nexport type CheckboxModelType = CheckboxValueType | CheckboxValueType[]\n\nexport const checkboxProps = buildProps({\n /**\n * @description Component color - Accept Vuesax's color, Hex, rgb\n */\n color: useColorProp,\n\n /**\n * @description binding value\n */\n modelValue: {\n type: definePropType([\n String,\n Number,\n Boolean,\n Object,\n Array,\n ]),\n default: undefined,\n },\n\n notValue: {\n type: definePropType([\n String,\n Number,\n Boolean,\n Object,\n Array,\n ]),\n },\n\n /**\n * @description self value of the Checkbox, used inside a `checkbox-group`\n */\n value: {\n type: definePropType([\n String,\n Number,\n Boolean,\n Object,\n Array,\n ]),\n },\n\n /** @description checkbox id */\n id: {\n type: String,\n default: null,\n },\n\n /** @description Set indeterminate state, only responsible for style control */\n indeterminate: {\n type: Boolean,\n },\n\n /** @description if the Checkbox is checked */\n checked: {\n type: Boolean,\n },\n\n /** @description Force checked component */\n checkedForce: {\n type: Boolean,\n },\n /**\n * @description whether the Checkbox is disabled\n */\n disabled: {\n type: Boolean,\n },\n /**\n * @description if the Checkbox is loading\n */\n loading: {\n type: Boolean,\n },\n /**\n * @description Label of the Checkbox\n */\n label: {\n type: String,\n },\n /**\n * @description Change the position of the label.\n */\n labelBefore: {\n type: Boolean,\n },\n /**\n * @description Add a line in the center of the label when checked.\n */\n lineThrough: {\n type: Boolean,\n },\n /**\n * @description native 'name' attribute\n */\n name: {\n type: String,\n default: undefined,\n },\n /**\n * @description minimum number of checkbox checked\n */\n min: {\n type: Number,\n },\n /**\n * @description maximum number of checkbox checked\n */\n max: {\n type: Number,\n },\n} as const)\n\nexport const checkboxEmits = {\n [UPDATE_MODEL_EVENT]: (val: CheckboxModelType) =>\n isString(val) || isNumber(val) || isBoolean(val) || isArray(val),\n change: (val: CheckboxModelType) =>\n isString(val) || isNumber(val) || isBoolean(val),\n}\n\nexport type CheckboxProps = ExtractPropTypes\nexport type CheckboxEmits = typeof checkboxEmits\nexport type CheckboxEmitsFn = EmitFn\nexport type CheckboxInstance = InstanceType\n","import {\n type ComponentInternalInstance,\n computed,\n inject,\n onBeforeMount,\n ref,\n toRaw,\n} from 'vue'\nimport { isEqual, isNil, toArray } from 'lodash-unified'\nimport { isArray, isBoolean, isObject, isUndefined } from '@vuesax-alpha/utils'\nimport { UPDATE_MODEL_EVENT } from '@vuesax-alpha/constants'\nimport { useDisabled } from '@vuesax-alpha/hooks'\nimport { checkboxGroupContextKey } from '@vuesax-alpha/tokens'\nimport type {\n CheckboxEmitsFn,\n CheckboxProps,\n CheckboxValueType,\n} from './../checkbox'\n\nconst setStoreValue = (\n props: CheckboxProps,\n { model }: Pick\n) => {\n if (props.checked) {\n if (isArray(model.value) && !model.value.includes(props.value)) {\n model.value.push(props.value)\n } else {\n model.value = props.value || true\n }\n }\n}\n\nexport const useCheckbox = (\n props: CheckboxProps,\n emit: CheckboxEmitsFn,\n slots: ComponentInternalInstance['slots']\n) => {\n // self model check status\n const selfModel = ref(false)\n const isLimitExceeded = ref(false)\n\n const checkboxGroup = inject(checkboxGroupContextKey, undefined)\n const isGroup = computed(() => isUndefined(checkboxGroup) === false)\n\n const isChecked = computed(() => {\n const value = model.value || checkboxGroup?.modelValue\n\n if (isBoolean(value)) return value\n\n if (isArray(value)) {\n if (isObject(props.value)) {\n return value.map(toRaw).some((o) => isEqual(o, props.value))\n }\n return value.map(toRaw).includes(props.value)\n }\n\n if (value !== null && value !== undefined) return value === props.value\n\n if (props.checkedForce) return true\n\n return !!value\n })\n\n const hasOwnLabel = computed(() => {\n return !!(slots.default || props.label)\n })\n\n const isLimitDisabled = computed(() => {\n const max = Number(checkboxGroup?.max?.value || props.max)\n const min = Number(checkboxGroup?.min?.value || props.min)\n\n return (\n (!isNil(max) && toArray(model.value).length >= max && !isChecked.value) ||\n (!isNil(min) && toArray(model.value).length <= min && isChecked.value)\n )\n })\n\n const isDisabled = useDisabled(\n computed(() => checkboxGroup?.disabled.value || isLimitDisabled.value)\n )\n\n const model = computed({\n get() {\n return isGroup.value\n ? checkboxGroup?.modelValue?.value\n : props.modelValue || selfModel.value\n },\n\n set(val: CheckboxValueType) {\n if (isDisabled.value || isLimitExceeded.value) return\n\n if (isGroup.value && isArray(val)) {\n isLimitExceeded.value =\n checkboxGroup?.max?.value !== undefined &&\n val.length > checkboxGroup?.max.value\n isLimitExceeded.value === false && checkboxGroup?.changeEvent?.(val)\n return\n }\n\n let updatedValue: CheckboxValueType = val\n // have self value\n if (val && props.value) {\n updatedValue = props.value\n }\n\n if (isBoolean(updatedValue)) {\n emit(UPDATE_MODEL_EVENT, updatedValue)\n } else if (isArray(props.modelValue)) {\n const modelValueRaw = props.modelValue.map(toRaw)\n\n const indexVal = modelValueRaw.findIndex((e) =>\n isEqual(e, updatedValue)\n )\n\n if (indexVal == -1) {\n modelValueRaw.push(updatedValue)\n } else {\n modelValueRaw.splice(indexVal, 1)\n }\n emit('update:modelValue', modelValueRaw)\n } else {\n if (updatedValue !== props.modelValue) {\n if (val) {\n emit(UPDATE_MODEL_EVENT, [props.modelValue, updatedValue])\n } else {\n emit(UPDATE_MODEL_EVENT, updatedValue)\n }\n } else {\n emit(UPDATE_MODEL_EVENT, props.notValue || false)\n }\n }\n\n selfModel.value = !!val\n },\n })\n\n onBeforeMount(() => {\n if (props.checked || props.checkedForce) {\n model.value = props.value || true\n }\n })\n\n const getCheckboxValue = (value: string | number | boolean) => {\n return value === props.value || value === true\n }\n\n const handleChange = (e: Event) => {\n if (isLimitExceeded.value) return\n\n const target = e.target as HTMLInputElement\n emit('change', getCheckboxValue(target.checked))\n }\n\n setStoreValue(props, { model })\n\n return {\n isChecked,\n isDisabled,\n hasOwnLabel,\n model,\n handleChange,\n }\n}\n\nexport type UseCheckbox = ReturnType\n","\n
\n
\n \n
\n \n \n
\n\n \n
\n \n \n {{ label }}\n \n
\n\n\n\n","import { UPDATE_MODEL_EVENT } from '@vuesax-alpha/constants'\nimport { buildProps, definePropType, isArray } from '@vuesax-alpha/utils'\n\nimport type { ExtractPropTypes } from 'vue'\nimport type { CheckboxValueType } from './checkbox'\nimport type CheckboxGroup from './checkbox-group.vue'\n\nexport type CheckboxGroupValueType = CheckboxValueType[]\n\nexport const checkboxGroupProps = buildProps({\n /**\n * @description binding value\n */\n modelValue: {\n type: definePropType(Array),\n default: () => [],\n },\n /**\n * @description whether the nesting checkboxes are disabled\n */\n disabled: {\n type: Boolean,\n default: false,\n },\n /**\n * @description minimum number of checkbox checked\n */\n min: {\n type: Number,\n },\n /**\n * @description maximum number of checkbox checked\n */\n max: {\n type: Number,\n },\n} as const)\n\nexport type CheckboxGroupProps = ExtractPropTypes\nexport type CheckboxGroupInstance = InstanceType\n\nexport const checkboxGroupEmits = {\n [UPDATE_MODEL_EVENT]: (val: CheckboxGroupValueType) => isArray(val),\n change: (val: CheckboxGroupValueType) => isArray(val),\n}\n\nexport type CheckboxGroupEmits = typeof checkboxGroupEmits\n","\n
\n \n
\n\n\n","import { withInstall, withNoopInstall } from '@vuesax-alpha/utils'\nimport Checkbox from './src/checkbox.vue'\nimport CheckboxGroup from './src/checkbox-group.vue'\n\nexport const VsCheckbox = withInstall(Checkbox, {\n CheckboxGroup,\n})\nexport default VsCheckbox\n\nexport const VsCheckboxGroup = withNoopInstall(CheckboxGroup)\n\nexport * from './src/checkbox-group'\nexport * from './src/checkbox'\n","import { buildProps, definePropType, mutable } from '@vuesax-alpha/utils'\n\nimport type { ExtractPropTypes } from 'vue'\nimport type Col from './col.vue'\n\nexport type ColSizeObject = {\n span?: number\n offset?: number\n pull?: number\n push?: number\n}\n\nexport type ColSize = number | ColSizeObject\n\nexport const colProps = buildProps({\n /**\n * @description number of column the grid spans\n */\n span: {\n type: Number,\n default: 12,\n },\n /**\n * @description number of spacing on the left side of the grid\n */\n offset: {\n type: Number,\n default: 0,\n },\n /**\n * @description number of columns that grid moves to the left\n */\n pull: {\n type: Number,\n default: 0,\n },\n /**\n * @description number of columns that grid moves to the right\n */\n push: {\n type: Number,\n default: 0,\n },\n /**\n * @description `<768px` Responsive columns or column props object\n */\n xs: {\n type: definePropType([Number, Object]),\n default: () => mutable({} as const),\n },\n /**\n * @description `≥768px` Responsive columns or column props object\n */\n sm: {\n type: definePropType([Number, Object]),\n default: () => mutable({} as const),\n },\n /**\n * @description `≥992px` Responsive columns or column props object\n */\n md: {\n type: definePropType([Number, Object]),\n default: () => mutable({} as const),\n },\n /**\n * @description `≥1200px` Responsive columns or column props object\n */\n lg: {\n type: definePropType([Number, Object]),\n default: () => mutable({} as const),\n },\n /**\n * @description `≥1920px` Responsive columns or column props object\n */\n xl: {\n type: definePropType([Number, Object]),\n default: () => mutable({} as const),\n },\n} as const)\n\nexport type ColProps = ExtractPropTypes\nexport type ColInstance = InstanceType\n","\n
\n \n
\n\n\n\n","import { withInstall } from '@vuesax-alpha/utils'\nimport Col from './src/col.vue'\n\nexport const VsCol = withInstall(Col)\nexport default VsCol\n\nexport * from './src/col'\n","import { UPDATE_MODEL_EVENT } from '@vuesax-alpha/constants'\nimport { useColorProp } from '@vuesax-alpha/hooks'\nimport { buildProps, definePropType, isBoolean } from '@vuesax-alpha/utils'\nimport type { EmitFn } from '@vuesax-alpha/utils'\n\nimport type { ExtractPropTypes } from 'vue'\nimport type Dialog from './dialog.vue'\n\ntype DoneFn = (cancel?: boolean) => void\nexport type DialogBeforeCloseFn = (done: DoneFn) => void\n\nexport const dialogProps = buildProps({\n /**\n * @description visibility of Dialog\n */\n modelValue: {\n type: Boolean,\n default: false,\n },\n /**\n * @description Component color - Accept Vuesax's color, Hex, rgb\n */\n color: { ...useColorProp, default: 'primary' },\n\n overlayBlur: {\n default: false,\n type: Boolean,\n },\n /**\n * @description\n */\n beforeClose: {\n type: definePropType(Function),\n },\n /**\n * @description Add a loading animation to the dialog.\n */\n loading: {\n default: false,\n type: Boolean,\n },\n\n /**\n * @description Makes the dialog the size of the window.\n */\n fullScreen: {\n default: false,\n type: Boolean,\n },\n\n /**\n * @description Remove the close button from the dialog.\n */\n notClose: {\n default: false,\n type: Boolean,\n },\n\n /**\n * @description It makes the dialog cannot be closed by clicking outside or by pressing the esc key.\n */\n preventClose: {\n default: false,\n type: Boolean,\n },\n\n /**\n * @description Eliminates the padding of the base elements of the dialog.\n */\n notPadding: {\n default: false,\n type: Boolean,\n },\n\n /**\n * @description When the dialog is opened, the page scroll is deleted.\n */\n lockScroll: {\n default: false,\n type: Boolean,\n },\n\n /**\n * @enum `square` | `rounded`\n * @default 'rounded'\n */\n shape: {\n type: String,\n values: ['square', 'rounded'] as const,\n default: 'rounded',\n },\n\n /**\n * @description It makes the dialog have an automatic width to its content.\n */\n autoWidth: {\n default: false,\n type: Boolean,\n },\n\n /**\n * @description Makes the content a maximum high and gives the possibility to overflow the content add scroll.\n */\n scroll: {\n default: false,\n type: Boolean,\n },\n\n /**\n * @description By default the header centers the elements, with this property the centering is eliminated.\n */\n notCenter: {\n default: false,\n type: Boolean,\n },\n\n /**\n * @description Determine the width of the dialog.\n */\n width: {\n default: null,\n type: String,\n },\n\n /**\n * @deprecated\n */\n overflowHidden: Boolean,\n /**\n * @deprecated\n */\n blur: Boolean,\n} as const)\n\nexport const dialogEmits = {\n /**\n * @description triggers when the Dialog opens\n */\n open: () => true,\n /**\n * @description triggers when the Dialog opening animation ends\n */\n opened: () => true,\n /**\n * @description triggers when the Dialog closes\n */\n close: () => true,\n /**\n * @description triggers when the Dialog closing animation ends\n */\n closed: () => true,\n [UPDATE_MODEL_EVENT]: (value: boolean) => isBoolean(value),\n}\n\nexport type DialogEmits = typeof dialogEmits\nexport type DialogEmitFn = EmitFn\n\nexport type DialogProps = ExtractPropTypes\nexport type DialogInstance = InstanceType\n","import { computed, nextTick, onMounted, ref, watch } from 'vue'\nimport { useTimeoutFn } from '@vueuse/core'\nimport {\n useColor,\n useLockscreen,\n useNamespace,\n useVuesaxBaseComponent,\n useZIndex,\n} from '@vuesax-alpha/hooks'\nimport { UPDATE_MODEL_EVENT } from '@vuesax-alpha/constants'\nimport { getVsColor, isClient } from '@vuesax-alpha/utils'\nimport type { DialogEmitFn, DialogProps } from '../dialog'\n\nexport const useDialog = (props: DialogProps, emit: DialogEmitFn) => {\n const rebound = ref(false)\n const visible = ref(false)\n const closed = ref(false)\n const ns = useNamespace('dialog')\n const { nextZIndex } = useZIndex()\n const vsBaseClasses = useVuesaxBaseComponent(useColor())\n\n const zIndex = ref(nextZIndex())\n\n const afterEnter = () => {\n emit('opened')\n }\n\n const beforeLeave = () => {\n emit('close')\n }\n\n const afterLeave = () => {\n emit('closed')\n emit(UPDATE_MODEL_EVENT, false)\n }\n\n const doOpen = () => {\n if (!isClient) return\n visible.value = true\n }\n\n const doClose = () => {\n visible.value = false\n }\n\n const open = () => {\n doOpen()\n }\n\n const close = () => {\n const hide = (shouldCancel?: boolean) => {\n if (shouldCancel) return\n closed.value = true\n visible.value = false\n }\n\n if (props.beforeClose) {\n props.beforeClose(hide)\n } else {\n doClose()\n }\n // doClose()\n }\n\n const handleClose = () => {\n if (props.preventClose) {\n rebound.value = true\n useTimeoutFn(() => (rebound.value = false), 300)\n\n return\n }\n close()\n }\n\n if (props.lockScroll) {\n useLockscreen(visible)\n }\n\n watch(\n () => props.modelValue,\n (val: boolean) => {\n if (val) {\n closed.value = false\n rebound.value = true\n\n open()\n zIndex.value = nextZIndex()\n\n if (props.lockScroll) {\n document.body.style.overflow = 'hidden'\n }\n nextTick(() => {\n emit('open')\n })\n } else {\n rebound.value = false\n if (props.lockScroll) {\n document.body.style.overflow = ''\n }\n if (visible.value) {\n close()\n }\n }\n }\n )\n\n const dialogKls = computed(() => [\n ns.b('original'),\n vsBaseClasses,\n ns.m(props.shape),\n {\n [ns.m('rebound')]: rebound.value,\n [ns.m('not-padding')]: props.notPadding,\n [ns.m('auto-width')]: props.autoWidth,\n [ns.m('scroll')]: props.scroll,\n [ns.m('loading')]: props.loading,\n [ns.m('not-center')]: props.notCenter,\n },\n ])\n\n const dialogStyles = computed(() => ({\n width: props.width,\n ...ns.cssVar({\n color: getVsColor(props.color),\n }),\n }))\n\n onMounted(() => {\n if (props.modelValue) {\n visible.value = true\n open()\n }\n })\n\n return {\n afterEnter,\n afterLeave,\n beforeLeave,\n handleClose,\n close,\n doClose,\n zIndex,\n closed,\n visible,\n dialogKls,\n dialogStyles,\n }\n}\n","import { computed } from 'vue'\nimport { useDeprecated } from '@vuesax-alpha/hooks'\n\nimport type { DialogProps } from './dialog'\n\nexport const dialogDeprecated = (props: DialogProps) => {\n useDeprecated(\n {\n from: 'overflowHidden',\n scope: 'vs-dialog',\n version: 'v0.1.0',\n type: 'Prop',\n ref: 'https://vuesax-alpha.vercel.app/components/dialog#lockScroll',\n replacement: 'lockScroll',\n },\n computed(() => !!props.overflowHidden)\n )\n}\n","\n \n \n \n
\n\n\n\n","import { buildProps, definePropType } from '@vuesax-alpha/utils'\nimport type { RouteLocationRaw } from 'vue-router'\nimport type { NavbarItem as _NavbarItem } from '@vuesax-alpha/utils'\n\nimport type { ExtractPropTypes } from 'vue'\nimport type NavbarItem from './navbar-item.vue'\n\nexport const navbarItemProps = buildProps({\n /** @description Determines if the component is in active status. */\n active: {\n type: Boolean,\n },\n\n /** @description User-level route location, used for router-link */\n to: {\n type: definePropType([String, Object]),\n },\n\n /**\n * @description navbar-item options\n */\n link: {\n type: definePropType<_NavbarItem>([Object]),\n },\n\n id: {\n type: String,\n required: true,\n },\n} as const)\n\nexport type NavbarItemProps = ExtractPropTypes\n\nexport type NavbarItemInstance = InstanceType\n","\n \n {{ link?.text }}\n \n\n\n\n","\n