@threadlabs/looma 0.28.5 → 0.28.7

package/vue/UiImage.vue

@@ -1,8 +1,15 @@
-<!-- Generated by HTML Next 1.0.0-alpha.35 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.51 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, ref, useTemplateRef, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
-import { createDispatch, useComponentHost } from './host'
+import {
+  checkHydratedRoot,
+  createDispatch,
+  isInteger,
+  nativeAttrs,
+  useComponentHost,
+  useReflectedProp,
+} from './host'
 import { checkedProp, propValidityState, vPropValidity } from './props'
 
 defineOptions({ inheritAttrs: false })
@@ -138,38 +145,7 @@ void checkedProps.value
 watchSyncEffect(() => {
   void checkedProps.value
 })
-function nativeAttrs(attrs: Record<string, unknown>): Record<string, unknown> {
-  const names = Object.keys(attrs)
-  if (!names.some((name) => Object.hasOwn(Object.prototype, name))) return attrs
-  return Object.fromEntries(names.map((name) => [
-    Object.hasOwn(Object.prototype, name)
-      ? name === '__proto__' ? '__Proto__' : name[0]!.toUpperCase() + name.slice(1)
-      : name,
-    attrs[name],
-  ]))
-}
-const componentInstance = getCurrentInstance()
-function reflectedProp(
-  name: string,
-  kebab: string,
-  value: unknown,
-  fallback: string | undefined,
-  bound: boolean,
-  separator?: string,
-): string | undefined {
-  const incoming = componentInstance?.vnode.props
-  if (
-    !bound
-    && (incoming === null || incoming === undefined
-      || (!Object.hasOwn(incoming, name) && !Object.hasOwn(incoming, kebab)))
-  ) return fallback
-  if (value === null || value === undefined) return undefined
-  return Array.isArray(value) && separator !== undefined
-    ? value.join(separator)
-    : typeof value === 'object'
-    ? JSON.stringify(value)
-    : String(value)
-}
+const reflectedProp = useReflectedProp()
 const hydrationInstance = getCurrentInstance()
 const emit = defineEmits<{
   'update:height': [value: number]
@@ -188,19 +164,7 @@ const emit = defineEmits<{
 
 const root = ref<HTMLElement | null>(null)
 const frameElement = useTemplateRef<HTMLElement>('frameElement')
-const hydrationNode = hydrationInstance?.vnode.el
-if (
-  typeof window !== 'undefined' && hydrationNode != null
-  && (!(hydrationNode instanceof Element) || hydrationNode.localName !== ('figure'))
-) {
-  throw Object.assign(new Error('HR005: Server markup for <ui-image> has an incompatible root.'), {
-    name: 'HtmlDiagnosticError',
-    diagnostic: Object.freeze({
-      code: 'HR005',
-      message: 'Server markup for <ui-image> has an incompatible root.',
-    }),
-  })
-}
+checkHydratedRoot('figure', 'ui-image')
 
 /** The values the styles' :host-state() rules test. */
 const hostState = computed(() =>
@@ -256,7 +220,7 @@ useComponentHost(() => import('../components/ui-image/ui-image.js'), {
 
 <template>
   <figure
-    data-component="ui-image"
+    class="ui-image"
     v-bind="nativeAttrs($attrs)"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-alt="reflectedProp('alt', 'alt', checkedProps.alt, undefined, false)"
@@ -273,8 +237,8 @@ useComponentHost(() => import('../components/ui-image/ui-image.js'), {
       <slot name="media"><img
           :src="checkedProps.src ?? undefined"
           :alt="checkedProps.alt ?? undefined"
-          :width="checkedProps.width ?? undefined"
-          :height="checkedProps.height ?? undefined"
+          :width="checkedProps.width?.toString()"
+          :height="checkedProps.height?.toString()"
         ></slot>
       <div class="handles" :hidden="!(checkedProps.selected && checkedProps.resizable)">
         <button
@@ -312,153 +276,154 @@ useComponentHost(() => import('../components/ui-image/ui-image.js'), {
 </template>
 
 <style scoped>
-[data-component~="ui-image"] {
-  display: flex;
-  justify-content: flex-start;
-  box-sizing: border-box;
-  max-inline-size: 100%;
-  min-inline-size: 0;
-  margin: 0;
-  padding: var(--ui-space-3) 0;
-}
-[data-component~="ui-image"][data-ui-image-state~="placement=center"] {
-  justify-content: center;
-}
-[data-component~="ui-image"][data-ui-image-state~="placement=wrap-left"] {
-  float: left;
-  padding-inline-end: var(--ui-space-4);
-}
-[data-component~="ui-image"][data-ui-image-state~="placement=wrap-right"] {
-  float: right;
-  padding-inline-start: var(--ui-space-4);
-}
-[data-component~="ui-image"]:is([data-component~="ui-image"][data-ui-image-state~="placement=wrap-left"], [data-component~="ui-image"][data-ui-image-state~="placement=wrap-right"]) {
-  inline-size: calc(var(--_ui-image-width, calc(100% / 3)) + var(--ui-space-4));
-}
-[data-component~="ui-image"]:is([data-component~="ui-image"][data-ui-image-state~="placement=wrap-left"], [data-component~="ui-image"][data-ui-image-state~="placement=wrap-right"])
+@scope (.ui-image) {
+  :scope:where(:scope) {
+    display: flex;
+    justify-content: flex-start;
+    box-sizing: border-box;
+    max-inline-size: 100%;
+    min-inline-size: 0;
+    margin: 0;
+    padding: var(--ui-space-3) 0;
+  }
+  :scope:where(:scope):is([data-ui-image-state~="placement=center"]) {
+    justify-content: center;
+  }
+  :scope:where(:scope):is([data-ui-image-state~="placement=wrap-left"]) {
+    float: left;
+    padding-inline-end: var(--ui-space-4);
+  }
+  :scope:where(:scope):is([data-ui-image-state~="placement=wrap-right"]) {
+    float: right;
+    padding-inline-start: var(--ui-space-4);
+  }
+  :scope:where(:scope):is(:is(:scope[data-ui-image-state~="placement=wrap-left"], :scope[data-ui-image-state~="placement=wrap-right"])) {
+    inline-size: calc(var(--_ui-image-width, calc(100% / 3)) + var(--ui-space-4));
+  }
+  :scope:is(:scope[data-ui-image-state~="placement=wrap-left"], :scope[data-ui-image-state~="placement=wrap-right"])
+    .frame {
+    inline-size: 100%;
+  }
+  :scope:is(:scope[data-ui-image-state~="placement=wrap-left"], :scope[data-ui-image-state~="placement=wrap-right"])
+    .frame
+    img,
+  :scope:is(:scope[data-ui-image-state~="placement=wrap-left"], :scope[data-ui-image-state~="placement=wrap-right"])
+    .frame
+    :slotted(img) {
+    inline-size: 100%;
+  }
   .frame {
-  inline-size: 100%;
-}
-[data-component~="ui-image"]:is([data-component~="ui-image"][data-ui-image-state~="placement=wrap-left"], [data-component~="ui-image"][data-ui-image-state~="placement=wrap-right"])
-  .frame
-  img,
-[data-component~="ui-image"]:is([data-component~="ui-image"][data-ui-image-state~="placement=wrap-left"], [data-component~="ui-image"][data-ui-image-state~="placement=wrap-right"])
-  .frame
-  :slotted(img) {
-  inline-size: 100%;
-}
-.frame {
-  position: relative;
-  flex: 0 1 auto;
-  inline-size: var(--_ui-image-width, fit-content);
-  max-inline-size: 100%;
-  min-inline-size: 0;
-  align-self: flex-start;
-  border-radius: var(--ui-radius-md);
-}
-.frame img, .frame :slotted(img) {
-  display: block;
-  max-inline-size: 100%;
-  block-size: auto;
-  margin: 0;
-  border-radius: inherit;
-}
-[data-component~="ui-image"][data-resizing] .frame img,
-[data-component~="ui-image"][data-resizing] .frame :slotted(img) {
-  inline-size: 100%;
-}
-[data-component~="ui-image"][data-ui-image-state~="selected"] .frame {
-  outline: var(--ui-focus-width) solid var(--ui-focus-ring);
-  outline-offset: var(--ui-border-width);
-}
-.handle {
-  position: absolute;
-  z-index: 1;
-  inline-size: 24px;
-  block-size: 24px;
-  padding: 0;
-  border: 0;
-  background: transparent;
-  touch-action: none;
-}
-.handle::after {
-  content: "";
-  position: absolute;
-  inset: 8px;
-  background: var(--ui-surface);
-  border: var(--ui-border-width) solid var(--ui-focus-ring);
-  border-radius: var(--ui-radius-sm);
-}
-.handle:focus-visible {
-  outline: var(--ui-focus-width) solid var(--ui-focus-ring);
-  border-radius: var(--ui-radius-sm);
-}
-.handle[data-corner="top-left"] {
-  top: -12px;
-  left: -12px;
-  cursor: nwse-resize;
-}
-.handle[data-corner="top-right"] {
-  top: -12px;
-  right: -12px;
-  cursor: nesw-resize;
-}
-.handle[data-corner="bottom-left"] {
-  bottom: -12px;
-  left: -12px;
-  cursor: nesw-resize;
-}
-.handle[data-corner="bottom-right"] {
-  bottom: -12px;
-  right: -12px;
-  cursor: nwse-resize;
-}
-.handles[hidden], [data-component~="ui-image"][hidden] {
-  display: none;
-}
-@media (max-width: 767px) {
-  [data-component~="ui-image"]:is([data-component~="ui-image"][data-ui-image-state~="placement=wrap-left"], [data-component~="ui-image"][data-ui-image-state~="placement=wrap-right"]) {
-    float: none;
+    position: relative;
+    flex: 0 1 auto;
+    inline-size: var(--_ui-image-width, fit-content);
+    max-inline-size: 100%;
+    min-inline-size: 0;
+    align-self: flex-start;
+    border-radius: var(--ui-radius-md);
+  }
+  .frame img, .frame :slotted(img) {
+    display: block;
+    max-inline-size: 100%;
+    block-size: auto;
+    margin: 0;
+    border-radius: inherit;
+  }
+  :scope[data-resizing] .frame img, :scope[data-resizing] .frame :slotted(img) {
     inline-size: 100%;
-    padding-inline: 0;
   }
-  [data-component~="ui-image"]:is([data-component~="ui-image"][data-ui-image-state~="placement=wrap-left"], [data-component~="ui-image"][data-ui-image-state~="placement=wrap-right"])
-    .handles {
-    display: none;
+  :scope[data-ui-image-state~="selected"] .frame {
+    outline: var(--ui-focus-width) solid var(--ui-focus-ring);
+    outline-offset: var(--ui-border-width);
   }
-}
-@media (pointer: coarse) {
   .handle {
-    inline-size: 44px;
-    block-size: 44px;
+    position: absolute;
+    z-index: 1;
+    inline-size: 24px;
+    block-size: 24px;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    touch-action: none;
   }
   .handle::after {
-    inset: 18px;
+    content: "";
+    position: absolute;
+    inset: 8px;
+    background: var(--ui-surface);
+    border: var(--ui-border-width) solid var(--ui-focus-ring);
+    border-radius: var(--ui-radius-sm);
+  }
+  .handle:focus-visible {
+    outline: var(--ui-focus-width) solid var(--ui-focus-ring);
+    border-radius: var(--ui-radius-sm);
   }
   .handle[data-corner="top-left"] {
-    top: -22px;
-    left: -22px;
+    top: -12px;
+    left: -12px;
+    cursor: nwse-resize;
   }
   .handle[data-corner="top-right"] {
-    top: -22px;
-    right: -22px;
+    top: -12px;
+    right: -12px;
+    cursor: nesw-resize;
   }
   .handle[data-corner="bottom-left"] {
-    bottom: -22px;
-    left: -22px;
+    bottom: -12px;
+    left: -12px;
+    cursor: nesw-resize;
   }
   .handle[data-corner="bottom-right"] {
-    bottom: -22px;
-    right: -22px;
+    bottom: -12px;
+    right: -12px;
+    cursor: nwse-resize;
   }
-}
-@media (forced-colors: active) {
-  [data-component~="ui-image"][data-ui-image-state~="selected"] .frame, .handle:focus-visible {
-    outline-color: Highlight;
+  .handles[hidden], :scope:where(:scope):is([hidden]) {
+    display: none;
   }
-  .handle::after {
-    border-color: Highlight;
-    background: Canvas;
+  @media (max-width: 767px) {
+    :scope:where(:scope):is(:is(:scope[data-ui-image-state~="placement=wrap-left"], :scope[data-ui-image-state~="placement=wrap-right"])) {
+      float: none;
+      inline-size: 100%;
+      padding-inline: 0;
+    }
+    :scope:is(:scope[data-ui-image-state~="placement=wrap-left"], :scope[data-ui-image-state~="placement=wrap-right"])
+      .handles {
+      display: none;
+    }
+  }
+  @media (pointer: coarse) {
+    .handle {
+      inline-size: 44px;
+      block-size: 44px;
+    }
+    .handle::after {
+      inset: 18px;
+    }
+    .handle[data-corner="top-left"] {
+      top: -22px;
+      left: -22px;
+    }
+    .handle[data-corner="top-right"] {
+      top: -22px;
+      right: -22px;
+    }
+    .handle[data-corner="bottom-left"] {
+      bottom: -22px;
+      left: -22px;
+    }
+    .handle[data-corner="bottom-right"] {
+      bottom: -22px;
+      right: -22px;
+    }
+  }
+  @media (forced-colors: active) {
+    :scope[data-ui-image-state~="selected"] .frame, .handle:focus-visible {
+      outline-color: Highlight;
+    }
+    .handle::after {
+      border-color: Highlight;
+      background: Canvas;
+    }
   }
 }
 </style>