feat(attention): warpify attention

components/attention/attentionUtil.js

@@ -23,6 +23,7 @@ export const props = {
 
 const middlePosition = 'calc(50% - 7px)'
 const isDirectionVertical = (name) => [TOP, BOTTOM].includes(name)
+
 export const computeCalloutArrow = ({ actualDirection, directionName, arrowEl }) => {
  actualDirection.value = directionName.value
  const directionIsVertical = isDirectionVertical(directionName.value)

components/attention/w-attention-arrow.vue

@@ -1,36 +1,41 @@
+<script setup>
+ import { computed } from 'vue'
+ import { props as attentionProps, opposites, rotation } from './attentionUtil.js'
+ import { attention as ccAttention } from '@warp-ds/component-classes'
+
+ const props = defineProps({
+ ...attentionProps,
+ direction: String
+ })
+
+ const arrowDirectionClassname = computed(() => {
+ const direction = arrowDirection.value?.charAt(0).toUpperCase() + arrowDirection.value?.slice(1);
+
+ return `arrowDirection${direction}`;
+ })
+
+ const arrowDirection = computed(() => opposites[props.direction])
+
+ const arrowClasses = computed(() => ({
+ [ccAttention.arrowBase]: true,
+ [ccAttention[arrowDirectionClassname.value]]: true, 
+ [ccAttention.arrowTooltip]: props.tooltip,
+ [ccAttention.arrowCallout]: props.callout,
+ [ccAttention.arrowPopover]: props.popover
+}));
+
+ const arrowStyle = computed(() => ({
+ // border alignment is off by a fraction of a pixel, this fixes it
+ [`margin-${arrowDirection.value}`]: '-0.5px',
+ transform: `rotate(${rotation[arrowDirection.value]}deg)`,
+ }))
+</script>
+
 <template>
- <div :class="arrowClass" :style="arrowStyle" />
+ <div :class="arrowClasses" :style="arrowStyle" />
 </template>
 
 <script>
-import { computed } from 'vue'
-import { props as attentionProps, opposites, rotation } from './attentionUtil.js'
-
-export default {
- name: 'wAttentionArrow',
- inheritAttrs: false,
- props: {
- ...attentionProps,
- direction: String
- },
- setup: (props) => {
- const arrowDirection = computed(() => opposites[props.direction])
- const arrowClass = computed(() => ({
- ['absolute h-14 w-14 border-2 border-b-0 border-r-0 transform']: true,
- [`-${arrowDirection.value}-8`]: true,
- ['bg-gray-700 border-gray-700']: props.tooltip,
- ['bg-green-100 border-green-400']: props.callout,
- ['bg-white border-white']: props.popover,
- }))
- const arrowStyle = computed(() => ({
- // TW doesn't let us specify exactly one corner, only whole sides
- borderTopLeftRadius: '4px',
- // border alignment is off by a fraction of a pixel, this fixes it
- [`margin-${arrowDirection.value}`]: '-0.5px',
- transform: `rotate(${rotation[arrowDirection.value]}deg)`
- }))
-
- return { arrowClass, arrowStyle }
- }
-}
+export default { name: 'wAttentionArrow' };
 </script>
+

components/attention/w-attention.vue

@@ -1,74 +1,79 @@
-<template>
- <div :class="[{ 'absolute z-50': !callout }, attentionClass]" ref="attentionRef" v-show="model">
- <div :class="wrapperClass" data-test="wrapper">
- <w-attention-arrow v-bind="$props" v-if="!noArrow" ref="arrowEl" :direction="actualDirection" />
- <div class="last-child:mb-0"><slot /></div>
- </div>
- </div>
-</template>
+<script setup>
+ import { watch, computed, ref, onMounted, nextTick } from 'vue'
+ import { attention as ccAttention } from '@warp-ds/component-classes'
+ import { computePosition, flip, offset, shift, arrow } from '@floating-ui/dom'
 
-<script>
-import { watch, computed, ref, onMounted, nextTick } from 'vue'
-import { absentProp } from '#util'
-import { props as attentionProps, directions, computeCalloutArrow } from './attentionUtil.js'
-import wAttentionArrow from './w-attention-arrow.vue'
-import { computePosition, flip, offset, shift, arrow } from '@floating-ui/dom'
-import { createModel, modelProps } from 'create-v-model'
+ import { absentProp } from '#util'
+ import { props as attentionProps, directions, computeCalloutArrow } from './attentionUtil.js'
+ import wAttentionArrow from './w-attention-arrow.vue'
+ import { createModel, modelProps } from 'create-v-model'
 
-export default {
- name: 'wAttention',
- props: {
+ const props = defineProps({
  ...attentionProps,
  ...modelProps({ modelDefault: absentProp }),
  targetEl: Object,
  attentionClass: [Object, String],
  attentionEl: {
  default: () => ref(null)
- }
- },
- components: { wAttentionArrow },
- setup: (props, { emit }) => {
- const directionName = computed(() => directions.find(e => props[e]))
- const wrapperClass = computed(() => ({
- ['border-2 relative']: true,
- ['bg-gray-700 border-gray-700 text-white rounded-4 py-6 px-8']: props.tooltip,
- ['bg-green-100 border-green-400 py-8 px-16 rounded-8']: props.callout,
- ['bg-white border-white rounded-8 p-16 filter drop-shadow-20']: props.popover,
- }))
+ },
+ })
+
+ const emit = defineEmits(['update:modelValue']);
+ const directionName = computed(() => directions.find(e => props[e]));
+
+ const wrapperClasses = computed(() => ({
+ [ccAttention.base]: true,
+ [ccAttention.tooltip]: props.tooltip,
+ [ccAttention.callout]: props.callout,
+ [ccAttention.popover]: props.popover
+ }))
+
+ const model = (props.modelValue === absentProp) ? ref(true) : createModel({ props, emit })
+ const arrowEl = ref(null)
+ const actualDirection = ref(directionName.value)
 
- const model = (props.modelValue === absentProp) ? ref(true) : createModel({ props, emit })
- const arrowEl = ref(null)
- const actualDirection = ref(directionName.value)
- const recompute = async () => {
- if (!model.value) return
- await nextTick()
- if (props.callout) return computeCalloutArrow({ directionName, arrowEl, actualDirection })
- const position = await computePosition(props.targetEl, props.attentionEl.value, {
- placement: directionName.value,
- middleware: [
- flip(),
- offset(8),
- shift({ padding: 16 }),
- arrow({ element: props.noArrow ? undefined : arrowEl.value.$el })
- ]
- })
- actualDirection.value = position.placement
- Object.assign(props.attentionEl.value.style, {
- left: '0',
- top: '0',
- transform: `translate3d(${Math.round(position.x)}px, ${Math.round(position.y)}px, 0)`
- })
- let { x, y } = position.middlewareData.arrow
- arrowEl.value.$el.style.left = x ? (x + 'px') : null
- arrowEl.value.$el.style.top = y ? (y + 'px') : null
- }
+ const recompute = async () => {
+ if (!model.value) return
+ await nextTick()
+ if (props.callout) return computeCalloutArrow({ directionName, arrowEl, actualDirection })
+ if(!props.attentionEl.value) return
 
- onMounted(async () => {
- watch(() => [props.top, props.bottom, props.left, props.right], recompute)
- watch(model, recompute, { immediate: props.callout })
+ const position = await computePosition(props.targetEl, props.attentionEl.value, {
+ placement: directionName.value,
+ middleware: [
+ flip(),
+ offset(8),
+ shift({ padding: 16 }),
+ arrow({ element: props.noArrow ? undefined : arrowEl.value.$el })
+ ]
  })
 
- return { wrapperClass, attentionRef: props.attentionEl, arrowEl, actualDirection, model }
+ actualDirection.value = position.placement
+ Object.assign(props.attentionEl.value.style, {
+ left: '0',
+ top: '0',
+ transform: `translate3d(${Math.round(position.x)}px, ${Math.round(position.y)}px, 0)`
+ })
+ let { x, y } = position.middlewareData.arrow
+ arrowEl.value.$el.style.left = x ? (x + 'px') : null
+ arrowEl.value.$el.style.top = y ? (y + 'px') : null
  }
-}
+
+ onMounted(async () => {
+ watch(() => [props.top, props.bottom, props.left, props.right], recompute)
+ watch(model, recompute, { immediate: props.callout })
+ })
+</script>
+
+<template>
+ <div :class="[{ 'absolute z-50': !callout }, attentionClass]" ref="attentionRef" v-show="model">
+ <div :class="wrapperClasses" data-test="wrapper">
+ <w-attention-arrow v-bind="$props" v-if="!noArrow" ref="arrowEl" :direction="actualDirection" />
+ <div :class="ccAttention.content"><slot /></div>
+ </div>
+ </div>
+</template>
+
+<script>
+export default { name: 'wAttention' }
 </script>

dev/pages/Attention.vue

@@ -3,38 +3,41 @@ import { ref, reactive } from 'vue'
 import { radio, useIsActive } from '#dev-util'
 import { wAttention, wBox } from '#components'
 
-const target = ref(null)
-const showing = ref(false)
+const tooltipTarget = ref(null)
+const calloutTarget = ref(null)
+const popoverTarget = ref(null)
 
-const variant = reactive({ active: 'Tooltip' })
-const active = useIsActive(variant)
-const variantControls = [
- { name: 'Tooltip', radio },
- { name: 'Callout', radio },
-]
+const tooltipShowing = ref(false)
+const calloutShowing = ref(false)
+const popoverShowing = ref(false)
 </script>
 
 <template>
  <div>
  <component-title title="Attention" />
 
- <token :state="[variant]">
- <div v-if="active('Tooltip')">
- <w-box neutral class="h4" ref="target" @mouseenter="showing = true" @mouseleave="showing = false">Hover over me</w-box>
- <w-attention tooltip bottom :target-el="target?.$el" v-model="showing">
+ <token>
+ <div>
+ <h2>Tooltip</h2>
+ <w-box neutral class="h4" ref="tooltipTarget" @mouseenter="tooltipShowing = true; target = $refs.tooltipTarget" @mouseleave="tooltipShowing = false">Hover over me</w-box>
+ <w-attention tooltip bottom :target-el="tooltipTarget ? tooltipTarget.$el : null" v-model="tooltipShowing">
  <p>Hello Warp!</p>
  </w-attention>
  </div>
- <div class="flex items-center" v-else-if="active('Callout')">
- <w-box neutral class="h4">Don't hover over me</w-box>
- <w-attention callout right class="ml-8">
+ <div class="flex items-center">
+ <h2>Callout</h2>
+ <w-box neutral class="h4" ref="calloutTarget" @mouseenter="calloutShowing = true; target = $refs.calloutTarget" @mouseleave="calloutShowing = false">Don't hover over me</w-box>
+ <w-attention callout right :target-el="calloutTarget ? calloutTarget.$el : null" v-model="calloutShowing" class="ml-8">
  <p>Hello Warp! This thing is new!</p>
  </w-attention>
  </div>
+ <div>
+ <h2>Popover</h2>
+ <w-box neutral class="h4" ref="popoverTarget" @mouseenter="popoverShowing = true; target = $refs.popoverTarget" @mouseleave="popoverShowing = false">Hover over me</w-box>
+ <w-attention popover bottom :target-el="popoverTarget ? popoverTarget.$el : null" v-model="popoverShowing">
+ <p>Hello Warp!</p>
+ </w-attention>
+ </div>
  </token>
-
- <demo-controls>
- <demo-control label="Variant" :controls="variantControls" :state="variant" />
- </demo-controls>
  </div>
 </template>

package.json

@@ -48,8 +48,8 @@
  "@vue/compiler-sfc": "^3.2.37",
  "@vue/test-utils": "^2.0.2",
  "@warp-ds/core": "^1.0.0",
- "@warp-ds/component-classes": "^1.0.0-alpha.81",
- "@warp-ds/uno": "1.0.0-alpha.26",
+ "@warp-ds/component-classes": "^1.0.0-alpha.87",
+ "@warp-ds/uno": "1.0.0-alpha.28",
  "cleave-lite": "^1.0.0",
  "cz-conventional-changelog": "^3.3.0",
  "drnm": "^0.9.0",