reka-ui/dist/Toggle/Toggle.cjs.map

Vue port for Radix UI Primitives.

{"version":3,"file":"Toggle.cjs","sources":["../../src/Toggle/Toggle.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { useFormControl, useForwardExpose } from '@/shared'\nimport VisuallyHiddenInput from '@/VisuallyHidden/VisuallyHiddenInput.vue'\nimport type { FormFieldProps } from '@/shared/types'\nimport { injectToggleGroupRootContext } from '@/ToggleGroup/ToggleGroupRoot.vue'\n\nexport type ToggleEmits = {\n  /** Event handler called when the value of the toggle changes. */\n  'update:modelValue': [value: boolean]\n}\n\nexport type DataState = 'on' | 'off'\n\nexport interface ToggleProps extends PrimitiveProps, FormFieldProps {\n  /**\n   * The pressed state of the toggle when it is initially rendered. Use when you do not need to control its open state.\n   */\n  defaultValue?: boolean\n  /**\n   * The controlled pressed state of the toggle. Can be bind as `v-model`.\n   */\n  modelValue?: boolean | null\n  /**\n   * When `true`, prevents the user from interacting with the toggle.\n   */\n  disabled?: boolean\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { type Ref, computed } from 'vue'\nimport { useVModel } from '@vueuse/core'\nimport { Primitive } from '@/Primitive'\n\nconst props = withDefaults(defineProps<ToggleProps>(), {\n  modelValue: undefined,\n  disabled: false,\n  as: 'button',\n})\n\nconst emits = defineEmits<ToggleEmits>()\n\ndefineSlots<{\n  default: (props: {\n    /** Current value */\n    modelValue: typeof modelValue.value\n    /** Current state */\n    state: typeof dataState.value\n    /** Current pressed state */\n    pressed: typeof modelValue.value\n    /** Current disabled state */\n    disabled: boolean\n  }) => any\n}>()\n\nconst { forwardRef, currentElement } = useForwardExpose()\nconst toggleGroupContext = injectToggleGroupRootContext(null)\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  defaultValue: props.defaultValue,\n  passive: (props.modelValue === undefined) as false,\n}) as Ref<boolean>\n\nfunction togglePressed() {\n  modelValue.value = !modelValue.value\n}\n\nconst dataState = computed<DataState>(() => {\n  return modelValue.value ? 'on' : 'off'\n})\n\nconst isFormControl = useFormControl(currentElement)\n</script>\n\n<template>\n  <Primitive\n    :ref=\"forwardRef\"\n    :type=\"as === 'button' ? 'button' : undefined\"\n    :as-child=\"props.asChild\"\n    :as=\"as\"\n    :aria-pressed=\"modelValue\"\n    :data-state=\"dataState\"\n    :data-disabled=\"disabled ? '' : undefined\"\n    :disabled=\"disabled\"\n    @click=\"togglePressed\"\n  >\n    <slot\n      :model-value=\"modelValue\"\n      :disabled=\"disabled\"\n      :pressed=\"modelValue\"\n      :state=\"dataState\"\n    />\n\n    <VisuallyHiddenInput\n      v-if=\"isFormControl && name && !toggleGroupContext\"\n      type=\"checkbox\"\n      :name=\"name\"\n      :value=\"modelValue\"\n      :required=\"required\"\n    />\n  </Primitive>\n</template>\n"],"names":["useForwardExpose","injectToggleGroupRootContext","useVModel","computed","useFormControl"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAmCA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAMd,IAAA,MAAM,KAAQ,GAAA,MAAA;AAed,IAAA,MAAM,EAAE,UAAA,EAAY,cAAe,EAAA,GAAIA,wCAAiB,EAAA;AACxD,IAAM,MAAA,kBAAA,GAAqBC,yDAA6B,IAAI,CAAA;AAE5D,IAAA,MAAM,UAAa,GAAAC,cAAA,CAAU,KAAO,EAAA,YAAA,EAAc,KAAO,EAAA;AAAA,MACvD,cAAc,KAAM,CAAA,YAAA;AAAA,MACpB,OAAA,EAAU,MAAM,UAAe,KAAA;AAAA,KAChC,CAAA;AAED,IAAA,SAAS,aAAgB,GAAA;AACvB,MAAW,UAAA,CAAA,KAAA,GAAQ,CAAC,UAAW,CAAA,KAAA;AAAA;AAGjC,IAAM,MAAA,SAAA,GAAYC,aAAoB,MAAM;AAC1C,MAAO,OAAA,UAAA,CAAW,QAAQ,IAAO,GAAA,KAAA;AAAA,KAClC,CAAA;AAED,IAAM,MAAA,aAAA,GAAgBC,qCAAe,cAAc,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}