feat: new responsive view with height

examples/vue3/src/components/Responsive.vue

@@ -1,15 +1,25 @@
 <template>
  <div class="target">
- <p>
+ <p
+ v-for="n in 100"
+ :key="n"
+ >
  Responsive
  </p>
  </div>
 </template>
 
 <style scoped>
+.target p {
+ margin: 2px;
+ padding: 12px;
+ background-color: rgb(188, 130, 255);
+ color: black;
+}
+
 @media (max-width: 768px) {
- .target {
- background-color: rgb(236, 132, 132);
+ .target p {
+ background-color: rgb(115, 255, 173);
  }
 }
 </style>

packages/histoire/src/client/app/components/story/StoryResponsivePreview.vue

@@ -0,0 +1,206 @@
+<script lang="ts" setup>
+import { computed, Ref, ref, toRaw, toRefs, watch } from 'vue'
+import { useEventListener } from '@vueuse/core'
+import { Icon } from '@iconify/vue'
+import { STATE_SYNC, PREVIEW_SETTINGS_SYNC } from '../../util/const'
+import { PreviewSettings } from '../../util/preview-settings'
+import type { Story, Variant } from '../../types'
+import HatchedPattern from '../misc/HatchedPattern.vue'
+import CheckerboardPattern from '../misc/CheckerboardPattern.vue'
+
+const props = defineProps<{
+ story: Story
+ variant: Variant
+ settings: PreviewSettings
+}>()
+
+// Iframe
+
+const iframe = ref<HTMLIFrameElement>()
+
+function syncState () {
+ if (iframe.value) {
+ iframe.value.contentWindow.postMessage({
+ type: STATE_SYNC,
+ state: toRaw(props.variant.state),
+ })
+ }
+}
+
+let synced = false
+
+watch(() => props.variant.state, () => {
+ if (synced) {
+ synced = false
+ return
+ }
+ syncState()
+}, {
+ deep: true,
+ immediate: true,
+})
+
+useEventListener(window, 'message', (event) => {
+ if (event.data.type === STATE_SYNC) {
+ synced = true
+ Object.assign(props.variant.state, event.data.state)
+ }
+})
+
+const sandboxUrl = computed(() => {
+ const url = new URLSearchParams()
+ url.append('storyId', props.story.id)
+ url.append('variantId', props.variant.id)
+ return '/__sandbox?' + url.toString()
+})
+
+const isIframeLoaded = ref(false)
+
+watch(sandboxUrl, () => {
+ isIframeLoaded.value = false
+})
+
+// Settings
+
+function syncSettings () {
+ if (iframe.value) {
+ iframe.value.contentWindow.postMessage({
+ type: PREVIEW_SETTINGS_SYNC,
+ settings: toRaw(props.settings),
+ })
+ }
+}
+
+watch(() => props.settings, value => {
+ syncSettings()
+}, {
+ deep: true,
+ immediate: true,
+})
+
+// Iframe load
+
+function onIframeLoad () {
+ isIframeLoaded.value = true
+ syncState()
+ syncSettings()
+}
+
+// Resize
+
+const resizing = ref(false)
+
+function useDragger (el: Ref<HTMLDivElement>, value: Ref<number>, min: number, max: number, axis: 'x' | 'y') {
+ const onMouseDown = (event: MouseEvent) => {
+ event.preventDefault()
+ event.stopPropagation()
+ const start = axis === 'x' ? event.clientX : event.clientY
+ const startValue = value.value || (axis === 'x' ? iframe.value.offsetWidth : iframe.value.offsetHeight)
+ resizing.value = true
+ const onMouseMove = (event: MouseEvent) => {
+ const delta = (axis === 'x' ? event.clientX : event.clientY) - start
+ value.value = Math.max(min, Math.min(max, startValue + delta))
+ }
+ const onMouseUp = () => {
+ window.removeEventListener('mousemove', onMouseMove)
+ window.removeEventListener('mouseup', onMouseUp)
+ resizing.value = false
+ }
+ window.addEventListener('mousemove', onMouseMove)
+ window.addEventListener('mouseup', onMouseUp)
+ }
+ useEventListener(el, 'mousedown', onMouseDown)
+}
+
+const { responsiveWidth, responsiveHeight } = toRefs(props.settings)
+
+const horizontalDragger = ref<HTMLDivElement>()
+const verticalDragger = ref<HTMLDivElement>()
+const cornerDragger = ref<HTMLDivElement>()
+
+useDragger(horizontalDragger, responsiveWidth, 10, 20000, 'x')
+useDragger(verticalDragger, responsiveHeight, 10, 20000, 'y')
+useDragger(cornerDragger, responsiveWidth, 10, 20000, 'x')
+useDragger(cornerDragger, responsiveHeight, 10, 20000, 'y')
+
+// Handle rotate
+
+const finalWidth = computed(() => props.settings.rotate ? props.settings.responsiveHeight : props.settings.responsiveWidth)
+const finalHeight = computed(() => props.settings.rotate ? props.settings.responsiveWidth : props.settings.responsiveHeight)
+</script>
+
+<template>
+ <div class="htw-w-full htw-h-full htw-flex-1 htw-border htw-border-gray-100 dark:htw-border-gray-800 htw-rounded-lg htw-relative htw-overflow-hidden">
+ <div class="htw-absolute htw-inset-0 htw-w-full htw-h-full htw-bg-gray-200 dark:htw-bg-gray-850 htw-rounded-r-lg htw-border-l-2 htw-border-gray-500/10 dark:htw-border-gray-700/30 htw-overflow-hidden">
+ <HatchedPattern
+ class="htw-w-full htw-h-full htw-text-black/[2%] dark:htw-text-white/[2%]"
+ />
+ </div>
+
+ <div class="htw-h-full htw-overflow-auto htw-relative">
+ <div
+ class="htw-h-full htw-p-4 htw-overflow-hidden htw-bg-white dark:htw-bg-gray-700 htw-rounded-lg htw-relative"
+ :style="{
+ width: finalWidth ? `${finalWidth + 44}px` : null,
+ height: finalHeight ? `${finalHeight + 44}px` : null,
+ }"
+ >
+ <div class="htw-p-4 htw-h-full htw-relative">
+ <div class="htw-w-full htw-h-full htw-border htw-border-gray-100 dark:htw-border-gray-800 htw-rounded-sm htw-relative">
+ <div class="bind-preview-bg htw-absolute htw-inset-0" />
+
+ <CheckerboardPattern
+ v-if="settings.checkerboard"
+ class="htw-absolute htw-inset-0 htw-w-full htw-h-full htw-text-gray-500/20"
+ />
+
+ <iframe
+ ref="iframe"
+ :src="sandboxUrl"
+ class="htw-w-full htw-h-full htw-relative"
+ :class="{
+ 'htw-invisible': !isIframeLoaded,
+ 'htw-pointer-events-none': resizing,
+ }"
+ @load="onIframeLoad()"
+ />
+ </div>
+
+ <!-- Markers -->
+ <div class="htw-absolute htw-top-1 htw-left-4 htw-h-2 htw-w-px htw-bg-gray-200 dark:htw-bg-gray-800" />
+ <div class="htw-absolute htw-top-1 htw-right-4 htw-h-2 htw-w-px htw-bg-gray-200 dark:htw-bg-gray-800" />
+ <div class="htw-absolute htw-bottom-1 htw-left-4 htw-h-2 htw-w-px htw-bg-gray-200 dark:htw-bg-gray-800" />
+ <div class="htw-absolute htw-bottom-1 htw-right-4 htw-h-2 htw-w-px htw-bg-gray-200 dark:htw-bg-gray-800" />
+ <div class="htw-absolute htw-left-1 htw-top-4 htw-w-2 htw-h-px htw-bg-gray-200 dark:htw-bg-gray-800" />
+ <div class="htw-absolute htw-left-1 htw-bottom-4 htw-w-2 htw-h-px htw-bg-gray-200 dark:htw-bg-gray-800" />
+ <div class="htw-absolute htw-right-1 htw-top-4 htw-w-2 htw-h-px htw-bg-gray-200 dark:htw-bg-gray-800" />
+ <div class="htw-absolute htw-right-1 htw-bottom-4 htw-w-2 htw-h-px htw-bg-gray-200 dark:htw-bg-gray-800" />
+ </div>
+
+ <!-- Resize Dragger -->
+ <div
+ ref="horizontalDragger"
+ class="htw-absolute htw-w-4 htw-top-0 htw-bottom-4 htw-right-0 hover:htw-bg-primary-100 dark:hover:htw-bg-primary-800 htw-flex htw-items-center htw-justify-center htw-cursor-ew-resize htw-group hover:htw-text-primary-500"
+ >
+ <Icon
+ icon="mdi:drag-vertical-variant"
+ class="htw-w-4 htw-h-4 htw-opacity-20 group-hover:htw-opacity-90"
+ />
+ </div>
+ <div
+ ref="verticalDragger"
+ class="htw-absolute htw-h-4 htw-left-0 htw-right-4 htw-bottom-0 hover:htw-bg-primary-100 dark:hover:htw-bg-primary-800 htw-flex htw-items-center htw-justify-center htw-cursor-ns-resize htw-group hover:htw-text-primary-500"
+ >
+ <Icon
+ icon="mdi:drag-horizontal-variant"
+ class="htw-w-4 htw-h-4 htw-opacity-20 group-hover:htw-opacity-90"
+ />
+ </div>
+ <div
+ ref="cornerDragger"
+ class="htw-absolute htw-w-4 htw-h-4 htw-right-0 htw-bottom-0 hover:htw-bg-primary-100 dark:hover:htw-bg-primary-800 htw-flex htw-items-center htw-justify-center htw-cursor-nwse-resize htw-group hover:htw-text-primary-500"
+ />
+ </div>
+ </div>
+ </div>
+</template>

packages/histoire/src/client/app/components/story/StoryVariantGridItem.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { PropType, toRefs } from 'vue'
-import { useCurrentVariantRoute } from '../../composable/variant'
+import { useCurrentVariantRoute } from '../../util/variant'
 import type { Story, Variant } from '../../types'
 import SandboxVue3 from '../sandbox/SandboxVue3.vue'
 import { Icon } from '@iconify/vue'

packages/histoire/src/client/app/components/story/StoryVariantListItem.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { PropType, toRefs } from 'vue'
-import { useCurrentVariantRoute } from '../../composable/variant'
+import { useCurrentVariantRoute } from '../../util/variant'
 import type { Variant } from '../../types'
 import BaseListItemLink from '../base/BaseListItemLink.vue'
 import { Icon } from '@iconify/vue'