@pgcorp/ui-kit 0.10.0 → 0.10.1

package/src/components/shared/data-display/STooltipAnchor.vue

@@ -1,119 +0,0 @@
-<template>
-  <component
-    :is="rootTag"
-    ref="anchorRef"
-    v-bind="ownedAttrs.bindings()"
-    class="s-tooltip-anchor"
-    :data-shape="resolvedShape"
-    :data-width="resolvedWidth"
-    role="group"
-    tabindex="0"
-    :aria-label="resolvedAccessibleLabel"
-    @focusin="emit('focusin', $event)"
-    @focusout="emit('focusout', $event)"
-    @pointerenter="emit('pointerenter', $event)"
-    @pointerleave="emit('pointerleave', $event)"
-    @pointerdown="emit('pointerdown', $event)"
-    @pointerup="emit('pointerup', $event)"
-    @pointercancel="emit('pointercancel', $event)"
-  >
-    <slot />
-  </component>
-</template>
-
-<script setup lang="ts">
-import { computed, ref, type VNodeChild } from 'vue'
-import type { InteractiveElementApi } from '../../../internal/interactiveElement'
-import { useOwnedAttrs } from '../../../internal/ownedAttrs'
-import { useInteractiveLeafRegistration } from '../../../internal/passiveContentContract'
-import { validateExactString, validateNonEmptyString } from '../../../internal/runtimeContract'
-
-defineOptions({
-  name: 'STooltipAnchor',
-  inheritAttrs: false,
-})
-
-export type STooltipAnchorShape = 'default' | 'pill' | 'circle'
-export type STooltipAnchorTag = 'span' | 'div'
-export type STooltipAnchorWidth = 'auto' | 'full'
-export type STooltipAnchorElement = HTMLSpanElement | HTMLDivElement
-export type STooltipAnchorApi = InteractiveElementApi<STooltipAnchorElement>
-
-/**
- * Focus owner для tooltip над пассивным содержимым или недоступным control.
- * Focus owner for a tooltip around passive content or an unavailable control.
- */
-export interface Props {
-  /** Доступное имя самостоятельной focus-точки. / Accessible name of the standalone focus target. */
-  accessibleLabel: string
-  /** Валидный intrinsic root для inline или flow-content composition. / Valid intrinsic root for inline or flow-content composition. */
-  as?: STooltipAnchorTag
-  /** Геометрия принадлежащего компоненту focus ring. / Geometry of the component-owned focus ring. */
-  shape?: STooltipAnchorShape
-  /** Строчный или заполняющий layout-контракт. / Inline or fill layout contract. */
-  width?: STooltipAnchorWidth
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  as: 'span',
-  shape: 'default',
-  width: 'auto',
-})
-const emit = defineEmits<{
-  focusin: [event: FocusEvent]
-  focusout: [event: FocusEvent]
-  pointerenter: [event: PointerEvent]
-  pointerleave: [event: PointerEvent]
-  pointerdown: [event: PointerEvent]
-  pointerup: [event: PointerEvent]
-  pointercancel: [event: PointerEvent]
-}>()
-const slots = defineSlots<{
-  /** Пассивное содержимое или disabled control без собственной tab-stop. / Passive content or a disabled control without its own tab stop. */
-  default: () => VNodeChild
-}>()
-
-if (!slots.default) {
-  throw new Error(
-    'STooltipAnchor: default slot обязателен. / STooltipAnchor: the default slot is required.',
-  )
-}
-
-const anchorRef = ref<STooltipAnchorElement | null>(null)
-const ownedAttrs = useOwnedAttrs({ component: 'STooltipAnchor', owner: 'focusable tooltip anchor' })
-const resolvedAccessibleLabel = computed(() => (
-  validateNonEmptyString('STooltipAnchor', 'accessibleLabel', props.accessibleLabel)
-))
-const resolvedAs = computed(() => (
-  validateExactString('STooltipAnchor', 'as', props.as, ['span', 'div'] as const)
-))
-const rootTag = computed(() => resolvedAs.value === 'span' ? 'span' : 'div')
-const resolvedShape = computed(() => (
-  validateExactString(
-    'STooltipAnchor',
-    'shape',
-    props.shape,
-    ['default', 'pill', 'circle'] as const,
-  )
-))
-const resolvedWidth = computed(() => (
-  validateExactString('STooltipAnchor', 'width', props.width, ['auto', 'full'] as const)
-))
-
-useInteractiveLeafRegistration({ owner: 'STooltipAnchor' })
-
-const getElement = (): STooltipAnchorElement => {
-  const element = anchorRef.value
-  if (!element) {
-    throw new Error('STooltipAnchor: native anchor element is unavailable')
-  }
-  return element
-}
-
-defineExpose<STooltipAnchorApi>({
-  getElement,
-  focus: (options?: FocusOptions) => getElement().focus(options),
-})
-</script>
-
-<style lang="postcss" src="./STooltipAnchor.css" scoped></style>

package/src/components/shared/data-display/STooltipTarget.vue

@@ -1,94 +0,0 @@
-<template>
-  <component
-    :is="rootTag"
-    ref="targetRef"
-    v-bind="ownedAttrs.bindings()"
-    class="s-tooltip-target"
-    :data-appearance="resolvedAppearance"
-    :data-size="resolvedSize"
-    @pointerenter="emit('pointerenter', $event)"
-    @pointerleave="emit('pointerleave', $event)"
-  >
-    <slot />
-  </component>
-</template>
-
-<script setup lang="ts">
-import { computed, ref, type VNodeChild } from 'vue'
-import type { ElementApi } from '../../../internal/interactiveElement'
-import { useOwnedAttrs } from '../../../internal/ownedAttrs'
-import { validateExactString } from '../../../internal/runtimeContract'
-
-defineOptions({
-  name: 'STooltipTarget',
-  inheritAttrs: false,
-})
-
-export type STooltipTargetTag = 'span' | 'kbd'
-export type STooltipTargetAppearance = 'plain' | 'keycap'
-export type STooltipTargetSize = 'xs' | 'sm' | 'md'
-export type STooltipTargetApi = ElementApi<HTMLElement>
-
-/**
- * Пассивная pointer/geometry target для split-контракта STooltip.
- * Passive pointer and geometry target for the STooltip split contract.
- */
-export interface Props {
-  /** Семантический HTML root без собственной интерактивности. / Semantic HTML root without its own interactivity. */
-  as?: STooltipTargetTag
-  /** Нейтральная или keycap presentation. / Plain or keycap presentation. */
-  appearance?: STooltipTargetAppearance
-  /** Централизованная visual density target. / Centralized visual density of the target. */
-  size?: STooltipTargetSize
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  as: 'span',
-  appearance: 'plain',
-  size: 'sm',
-})
-const emit = defineEmits<{
-  pointerenter: [event: PointerEvent]
-  pointerleave: [event: PointerEvent]
-}>()
-const slots = defineSlots<{
-  /** Пассивное содержимое target. / Passive target content. */
-  default: () => VNodeChild
-}>()
-
-if (!slots.default) {
-  throw new Error('STooltipTarget: default slot обязателен. / STooltipTarget: the default slot is required.')
-}
-
-const targetRef = ref<HTMLElement | null>(null)
-const ownedAttrs = useOwnedAttrs({ component: 'STooltipTarget', owner: 'passive tooltip target' })
-const resolvedAs = computed(() => validateExactString(
-  'STooltipTarget',
-  'as',
-  props.as,
-  ['span', 'kbd'] as const,
-))
-const rootTag = computed(() => resolvedAs.value === 'kbd' ? 'kbd' : 'span')
-const resolvedAppearance = computed(() => validateExactString(
-  'STooltipTarget',
-  'appearance',
-  props.appearance,
-  ['plain', 'keycap'] as const,
-))
-const resolvedSize = computed(() => validateExactString(
-  'STooltipTarget',
-  'size',
-  props.size,
-  ['xs', 'sm', 'md'] as const,
-))
-
-const getElement = (): HTMLElement => {
-  const element = targetRef.value
-  if (!element) throw new Error('STooltipTarget: native target element is unavailable')
-  return element
-}
-
-defineExpose<STooltipTargetApi>({ getElement })
-</script>
-
-<style lang="postcss" src="./STooltipTarget.css" scoped></style>