vue-cesium/es/components/ui/fab/fab.mjs.map

Vue 3.x components for CesiumJS.

{"version":3,"file":"fab.mjs","sources":["../../../../../../packages/components/ui/fab/fab.ts"],"sourcesContent":["import { h, defineComponent, ref, computed, provide, ComponentPublicInstance } from 'vue'\nimport type { VNode, ExtractPropTypes } from 'vue'\nimport useModelToggle, { useModelToggleEmits } from '@vue-cesium/composables/private/use-model-toggle'\nimport { hSlot, hMergeSlot } from '@vue-cesium/utils/private/render'\nimport { fabKey } from '@vue-cesium/utils/config'\nimport useFab from './use-fab'\nimport VcBtn from '../btn'\nimport VcIcon from '../icon'\nimport defaultProps from './defaultProps'\nimport { LooseDictionary } from '@vue-cesium/utils/types'\n\nexport const fabProps = defaultProps\nexport default defineComponent({\n  name: 'VcFab',\n\n  props: fabProps,\n\n  emits: useModelToggleEmits,\n\n  setup(props, { slots }) {\n    const triggerRef = ref<typeof VcBtn>(null!)\n\n    const showing = ref(props.modelValue === true)\n    const { formClass, labelProps } = useFab(props, showing)\n\n    const hideOnRouteChange = computed(() => props.persistent !== true)\n\n    const { hide, toggle } = useModelToggle({\n      showing,\n      hideOnRouteChange\n    })\n\n    const slotScope = computed(() => ({ opened: showing.value }))\n\n    const classes = computed(\n      () =>\n        'vc-fab z-fab row inline justify-center' +\n        ` vc-fab--align-${props.verticalActionsAlign} ${formClass.value}` +\n        (showing.value === true ? ' vc-fab--opened' : ' vc-fab--closed')\n    )\n\n    const actionClass = computed(\n      () =>\n        'vc-fab__actions flex no-wrap inline' +\n        ` vc-fab__actions--${props.direction}` +\n        ` vc-fab__actions--${showing.value === true ? 'opened' : 'closed'}`\n    )\n\n    const iconHolderClass = computed(() => 'vc-fab__icon-holder ' + ` vc-fab__icon-holder--${showing.value === true ? 'opened' : 'closed'}`)\n\n    function getIcon(kebab, camel) {\n      const slotFn = slots[kebab]\n      const classes = `vc-fab__${kebab} absolute-full`\n\n      return slotFn === void 0 ? h(VcIcon, { class: classes, name: props[camel] } as any) : h('div', { class: classes }, slotFn(slotScope.value))\n    }\n\n    function getTriggerContent() {\n      const child: Array<VNode> = []\n\n      props.hideIcon !== true &&\n        child.push(h('div', { class: iconHolderClass.value }, [getIcon('icon', 'icon'), getIcon('active-icon', 'activeIcon')]))\n\n      if (props.label !== '' || slots.label !== void 0) {\n        child[labelProps.value.action](h('div', labelProps.value.data, slots.label !== void 0 ? slots.label(slotScope.value) : [props.label]))\n      }\n\n      return hMergeSlot(slots.tooltip, child)\n    }\n\n    provide(fabKey, {\n      showing,\n\n      onChildClick(evt) {\n        props.hideActionOnClick && hide(evt)\n\n        if (triggerRef.value !== null) {\n          triggerRef.value.$el.focus()\n        }\n      }\n    })\n\n    return () =>\n      h(\n        'div',\n        {\n          class: classes.value\n        },\n        [\n          h(\n            VcBtn,\n            {\n              ref: triggerRef,\n              class: formClass.value,\n              ...props,\n              noWrap: true,\n              stack: props.stacked,\n              align: void 0,\n              icon: void 0,\n              label: void 0,\n              noCaps: true,\n              fab: true,\n              flat: props.flat,\n              size: props.size,\n              'aria-expanded': showing.value === true ? 'true' : 'false',\n              'aria-haspopup': 'true',\n              onClick: toggle\n            },\n            getTriggerContent\n          ),\n\n          h('div', { class: actionClass.value }, hSlot(slots.default))\n        ]\n      )\n  }\n})\n\n// export type VcFabProps = ExtractPropTypes<typeof fabProps>\n\nexport interface VcFabProps {\n  /**\n   * Define the button HTML DOM type.\n   * Default value: a\n   */\n  type?: 'a' | 'submit' | 'button' | 'reset' | undefined\n  /**\n   * Use 'outline' design for Fab button.\n   */\n  outline?: boolean | undefined\n  /**\n   * Use 'push' design for Fab button.\n   */\n  push?: boolean | undefined\n  /**\n   * Use 'flat' design for Fab button.\n   */\n  flat?: boolean | undefined\n  /**\n   * Remove shadow.\n   */\n  unelevated?: boolean | undefined\n  /**\n   * Apply custom padding (vertical [horizontal]); Size in CSS units, including unit name or standard size name (none|xs|sm|md|lg|xl); Also removes the min width and height when set.\n   */\n  padding?: string | undefined\n  /**\n   * Color name for component from the css color palette.\n   */\n  color?: string | undefined\n  /**\n   * Overrides text color (if needed); Color name from the css color palette.\n   */\n  textColor?: string | undefined\n  /**\n   * Apply the glossy effect over the button.\n   */\n  glossy?: boolean | undefined\n  /**\n   * Display label besides the FABs, as external content.\n   */\n  externalLabel?: boolean | undefined\n  /**\n   * The label that will be shown when Fab is extended.\n   */\n  label?: string | number | undefined\n  /**\n   * Position of the label around the icon.\n   */\n  labelPosition?: 'top' | 'right' | 'bottom' | 'left' | undefined\n  /**\n   * Hide the label; Useful for animation purposes where you toggle the visibility of the label.\n   */\n  hideLabel?: boolean | undefined\n  /**\n   * Class definitions to be attributed to the label container.\n   */\n  labelClass?: any[] | string | any | undefined\n  /**\n   * Style definitions to be attributed to the label container.\n   */\n  labelStyle?: any[] | string | any | undefined\n  /**\n   * Apply a rectangle aspect to the FAB.\n   */\n  square?: boolean | undefined\n  /**\n   * Put component in disabled mode.\n   */\n  disable?: boolean | undefined\n  /**\n   * Tabindex HTML attribute value.\n   */\n  tabindex?: number | string | undefined\n  /**\n   * Controls state of fab actions (showing/hidden); Works best with v-model directive, otherwise use along listening to 'update:modelValue' event.\n   */\n  modelValue?: boolean\n  /**\n   * Icon name following VueCesium convention; Make sure you have the icon library installed unless you are using 'img:' prefix.\n   */\n  icon?: string | undefined\n  /**\n   * Icon name following VueCesium convention; Make sure you have the icon library installed unless you are using 'img:' prefix.\n   */\n  activeIcon?: string | undefined\n  /**\n   * Hide the icon (don't use any).\n   */\n  hideIcon?: boolean | undefined\n  /**\n   * Direction to expand Fab Actions to.\n   * Default value: right\n   */\n  direction?: 'up' | 'right' | 'down' | 'left' | undefined\n  /**\n   * The side of the Fab where Fab Actions will expand (only when direction is 'up' or 'down').\n   * Default value: center\n   */\n  verticalActionsAlign?: 'left' | 'center' | 'right' | undefined\n  /**\n   * By default, Fab Actions are hidden when user navigates to another route and this prop disables this behavior.\n   */\n  persistent?: boolean | undefined\n  /**\n   * Emitted when fab actions are shown/hidden; Captured by v-model directive.\n   * @param value New state (showing/hidden)\n   */\n  'onUpdate:modelValue'?: (value: boolean) => void\n  /**\n   * Emitted after component has triggered show()\n   * @param evt JS event object\n   */\n  onShow?: (evt: LooseDictionary) => void\n  /**\n   * Emitted when component triggers show() but before it finishes doing it\n   * @param evt JS event object\n   */\n  onBeforeShow?: (evt: LooseDictionary) => void\n  /**\n   * Emitted after component has triggered hide()\n   * @param evt JS event object\n   */\n  onHide?: (evt: LooseDictionary) => void\n  /**\n   * Emitted when component triggers hide() but before it finishes doing it\n   * @param evt JS event object\n   */\n  onBeforeHide?: (evt: LooseDictionary) => void\n}\n\nexport interface VcFabSlots {\n  /**\n   * This is where VcFabActions may go into\n   */\n  default: () => VNode[]\n  /**\n   * Slot specifically designed for a VcTooltip\n   */\n  tooltip: () => VNode[]\n  /**\n   * Slot for icon shown when FAB is closed; Suggestion: VcIcon\n   * @param scope\n   */\n  icon: (scope: {\n    /**\n     * FAB is opened\n     */\n    opened: boolean\n  }) => VNode[]\n  /**\n   * Slot for icon shown when FAB is opened; Suggestion: VcIcon\n   * @param scope\n   */\n  'active-icon': (scope: {\n    /**\n     * FAB is opened\n     */\n    opened: boolean\n  }) => VNode[]\n  /**\n   * Slot for label\n   * @param scope\n   */\n  label: (scope: {\n    /**\n     * FAB is opened\n     */\n    opened: boolean\n  }) => VNode[]\n}\n\nexport interface VcFabRef extends ComponentPublicInstance<VcFabProps> {\n  /**\n   * Expands fab actions list\n   * @param evt JS event object\n   */\n  show: (evt?: LooseDictionary) => void\n  /**\n   * Collapses fab actions list\n   * @param evt JS event object\n   */\n  hide: (evt?: LooseDictionary) => void\n  /**\n   * Triggers component to toggle between show/hide\n   * @param evt JS event object\n   */\n  toggle: (evt?: LooseDictionary) => void\n}\n"],"names":["classes","VcIcon","VcBtn"],"mappings":"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"}