keep-vue
Version:
Keep Vue is an open-source component library built on top of Vue3 and Tailwind CSS. It offers a collection of pre-designed UI components and styles that you can easily integrate into your web applications.
101 lines (100 loc) • 5.38 kB
JavaScript
/// <reference types=".vue-global-types/vue_3.5_false.d.ts" />
import { SwitchRoot, SwitchThumb, useForwardPropsEmits, } from "radix-vue";
import { computed, ref } from "vue";
import { cn } from "../../utils/cn";
const { defineProps, defineSlots, defineEmits, defineExpose, defineModel, defineOptions, withDefaults, } = await import('vue');
const switchRef = ref();
let __VLS_typeProps;
const props = withDefaults(defineProps(), {
class: "",
variant: "default",
thumbClass: "",
});
const emits = defineEmits();
const restProps = computed(() => {
const { class: _, thumbClass, variant, ...rest } = props;
return rest;
});
const forwarded = useForwardPropsEmits(restProps, emits);
const rootClasses = computed(() => cn("peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-metal-900 focus-visible:ring-offset-2 focus-visible:ring-offset-metal-100 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary-500 data-[state=unchecked]:bg-metal-100 dark:data-[state=unchecked]:bg-metal-800", props.class));
const thumbClasses = computed(() => cn("pointer-events-none relative block h-5 w-5 rounded-full shadow-lg ring-0 transition-transform before:absolute data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0 data-[state=checked]:bg-white data-[state=unchecked]:bg-white dark:data-[state=unchecked]:bg-metal-400", props.variant === "default" &&
'before:left-1/2 before:top-1/2 before:h-2.5 before:w-2.5 before:-translate-x-1/2 before:-translate-y-1/2 before:rounded-full before:transition-colors before:content-[""] data-[state=checked]:before:bg-primary-500 data-[state=unchecked]:before:bg-metal-100', props.variant === "icon" &&
"bg-center bg-no-repeat data-[state=checked]:bg-moon data-[state=unchecked]:bg-sun", props.thumbClass));
const __VLS_withDefaultsArg = (function (t) { return t; })({
class: "",
variant: "default",
thumbClass: "",
});
const __VLS_fnComponent = (await import('vue')).defineComponent({
__typeEmits: {},
});
;
let __VLS_functionalComponentProps;
function __VLS_template() {
const __VLS_ctx = {};
const __VLS_localComponents = {
...{},
...{},
...__VLS_ctx,
};
let __VLS_components;
const __VLS_localDirectives = {
...{},
...__VLS_ctx,
};
let __VLS_directives;
let __VLS_styleScopedClasses;
let __VLS_resolvedLocalAndGlobalComponents;
const __VLS_0 = __VLS_resolvedLocalAndGlobalComponents.SwitchRoot;
/** @type { [typeof __VLS_components.SwitchRoot, typeof __VLS_components.SwitchRoot, ] } */
// @ts-ignore
const __VLS_1 = __VLS_asFunctionalComponent(__VLS_0, new __VLS_0({ ...(__VLS_ctx.forwarded), ref: ("switchRef"), ...{ class: ((__VLS_ctx.cn('peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-metal-900 focus-visible:ring-offset-2 focus-visible:ring-offset-metal-100 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary-500 data-[state=unchecked]:bg-metal-100 dark:data-[state=unchecked]:bg-metal-800', props.class))) }, }));
const __VLS_2 = __VLS_1({ ...(__VLS_ctx.forwarded), ref: ("switchRef"), ...{ class: ((__VLS_ctx.cn('peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-metal-900 focus-visible:ring-offset-2 focus-visible:ring-offset-metal-100 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary-500 data-[state=unchecked]:bg-metal-100 dark:data-[state=unchecked]:bg-metal-800', props.class))) }, }, ...__VLS_functionalComponentArgsRest(__VLS_1));
// @ts-ignore navigation for `const switchRef = ref()`
__VLS_ctx.switchRef;
var __VLS_6 = {};
const __VLS_7 = __VLS_resolvedLocalAndGlobalComponents.SwitchThumb;
/** @type { [typeof __VLS_components.SwitchThumb, ] } */
// @ts-ignore
const __VLS_8 = __VLS_asFunctionalComponent(__VLS_7, new __VLS_7({ ...{ class: (((__VLS_ctx.rootClasses, __VLS_ctx.thumbClasses))) }, }));
const __VLS_9 = __VLS_8({ ...{ class: (((__VLS_ctx.rootClasses, __VLS_ctx.thumbClasses))) }, }, ...__VLS_functionalComponentArgsRest(__VLS_8));
__VLS_nonNullable(__VLS_5.slots).default;
const __VLS_5 = __VLS_pickFunctionalComponentCtx(__VLS_0, __VLS_2);
var __VLS_slots;
var __VLS_inheritedAttrs;
const __VLS_refs = {
"switchRef": __VLS_6,
};
var $refs;
return {
slots: __VLS_slots,
refs: $refs,
attrs: {},
};
}
;
const __VLS_self = (await import('vue')).defineComponent({
setup() {
return {
SwitchRoot: SwitchRoot,
SwitchThumb: SwitchThumb,
cn: cn,
switchRef: switchRef,
forwarded: forwarded,
rootClasses: rootClasses,
thumbClasses: thumbClasses,
};
},
__typeEmits: {},
__typeProps: {},
props: {},
});
export default (await import('vue')).defineComponent({
setup() {
return {};
},
__typeEmits: {},
__typeProps: {},
props: {},
});
;