@threadlabs/looma 0.32.0 → 0.33.0

package/vue/UiColorPicker.vue

@@ -0,0 +1,422 @@
+<!-- Generated by HTML Next 1.0.0-alpha.69 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 {
+  checkHydratedRoot,
+  createDispatch,
+  nativeAttrs,
+  useComponentHost,
+  useReflectedProp,
+} from './host'
+import {
+  BINDING_INPUTS_PROP,
+  checkedProp,
+  checkPropInput,
+  type InputBindings,
+  propValidityState,
+  READY_INPUT,
+  requireInputStatus,
+  UNRESOLVED_INPUT,
+  vPropValidity,
+  vuePropInputs,
+} from './props'
+import UiInput from './UiInput.vue'
+
+defineOptions({ inheritAttrs: false })
+
+const propValidityContract = {
+  props: {
+    disabled: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'disabled' },
+      description: 'Prevents opening and editing.',
+      default: false,
+    },
+    label: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'aria-label' },
+      description: 'Accessible name for the swatch button and editor.',
+      default: 'Choose colour',
+    },
+    name: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'name' },
+      description:
+        'The form field name. Leave empty to omit the colour from form submission. A form reset restores value.',
+      default: '',
+    },
+    round: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'round' },
+      description: 'Makes the square swatch circular.',
+      default: false,
+    },
+    size: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'size' },
+      description: 'Shared control height, matching Input and Button of the same size.',
+      values: ['sm', 'md', 'lg'],
+      default: 'md',
+    },
+    value: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'value' },
+      description:
+        'An opaque sRGB colour as six hexadecimal digits prefixed with #. User edits emit input and change with detail.value. Invalid values are ignored. This\n      control does not submit a named form value.',
+      default: '#000000',
+    },
+  },
+} as const
+const props = defineProps({
+  disabled: { type: null as unknown as PropType<boolean | null> },
+  label: { type: null as unknown as PropType<string | null> },
+  name: { type: null as unknown as PropType<string | null> },
+  round: { type: null as unknown as PropType<boolean | null> },
+  size: { type: null as unknown as PropType<'sm' | 'md' | 'lg' | null> },
+  value: { type: null as unknown as PropType<string | null> },
+  [BINDING_INPUTS_PROP]: { type: null as unknown as PropType<InputBindings> },
+})
+const acceptedProps: Record<string, unknown> = {
+  disabled: false,
+  label: 'Choose colour',
+  name: '',
+  round: false,
+  size: 'md',
+  value: '#000000',
+}
+const inputTracking = vuePropInputs(acceptedProps, {
+  disabled: false,
+  label: 'Choose colour',
+  name: '',
+  round: false,
+  size: 'md',
+  value: '#000000',
+}, (name, value, source, values) => {
+  switch (name) {
+    case 'disabled':
+      return checkPropInput(value, { kind: 'terminal', name: 'boolean' }, true, true)
+    case 'label':
+      return checkPropInput(value, { kind: 'terminal', name: 'string' }, true, true)
+    case 'name':
+      return checkPropInput(value, { kind: 'terminal', name: 'string' }, true, true)
+    case 'round':
+      return checkPropInput(value, { kind: 'terminal', name: 'boolean' }, true, true)
+    case 'size':
+      return checkPropInput(value, { kind: 'terminal', name: 'keyword' }, true, true)
+    case 'value':
+      return checkPropInput(value, { kind: 'terminal', name: 'string' }, true, true)
+    default:
+      return { ok: false }
+  }
+}, () => {
+  void checkedProps.value
+})
+const propInputs = inputTracking.inputs
+const checkedProps = computed(() => {
+  void inputTracking.version.value
+  return ({
+    disabled: propInputs.value<boolean | null>(
+      'disabled',
+      props['disabled'],
+      props[BINDING_INPUTS_PROP],
+    ) as boolean,
+    label: propInputs.value<string | null>(
+      'label',
+      props['label'],
+      props[BINDING_INPUTS_PROP],
+    ) as string,
+    name: propInputs.value<string | null>(
+      'name',
+      props['name'],
+      props[BINDING_INPUTS_PROP],
+    ) as string,
+    round: propInputs.value<boolean | null>(
+      'round',
+      props['round'],
+      props[BINDING_INPUTS_PROP],
+    ) as boolean,
+    size: propInputs.value<'sm' | 'md' | 'lg' | null>(
+      'size',
+      props['size'],
+      props[BINDING_INPUTS_PROP],
+    ) as 'sm' | 'md' | 'lg',
+    value: propInputs.value<string | null>(
+      'value',
+      props['value'],
+      props[BINDING_INPUTS_PROP],
+    ) as string,
+  })
+})
+const inputStatus = (name: string, handlesError: boolean) => {
+  void checkedProps.value
+  void inputTracking.version.value
+  return requireInputStatus(propInputs.status(name), handlesError)
+}
+void checkedProps.value
+watchSyncEffect(() => {
+  void checkedProps.value
+})
+const reflectedProp = useReflectedProp()
+const hydrationInstance = getCurrentInstance()
+const emit = defineEmits<{
+  'update:value': [value: string]
+  input: [event: CustomEvent<{ readonly value: string }>]
+  change: [event: CustomEvent<{ readonly value: string }>]
+}>()
+
+const root = ref<HTMLElement | null>(null)
+const fieldElement = useTemplateRef<HTMLElement>('fieldElement')
+const triggerElement = useTemplateRef<HTMLElement>('triggerElement')
+const colourElement = useTemplateRef<HTMLElement>('colourElement')
+const editorElement = useTemplateRef<HTMLElement>('editorElement')
+const redElement = useTemplateRef<HTMLElement>('redElement')
+const greenElement = useTemplateRef<HTMLElement>('greenElement')
+const blueElement = useTemplateRef<HTMLElement>('blueElement')
+const hexElement = useTemplateRef<HTMLElement>('hexElement')
+checkHydratedRoot('span', 'ui-color-picker')
+
+/** The values the styles' :host() and :state() rules test. */
+const hostState = computed(() =>
+  [
+    checkedProps.value.size && 'size',
+    checkedProps.value.size != null && `size=${encodeURIComponent(checkedProps.value.size)}`,
+    checkedProps.value.round && 'round',
+  ].filter(Boolean).join(' ')
+)
+
+const isInputDetail = (
+  detail: unknown,
+): boolean => (detail !== null && typeof detail === 'object' && !Array.isArray(detail)
+  && typeof (detail as Record<string, unknown>)['value'] === 'string'
+  && Object.keys(detail as object).every((key) => ['value'].includes(key)))
+const dispatch = createDispatch(root, emit as (name: string, detail: unknown) => void, {
+  checks: {
+    input: isInputDetail,
+    change: isInputDetail,
+  },
+  modeled: ['value'],
+})
+
+useComponentHost(() => import('../components/ui-color-picker/ui-color-picker.js'), {
+  root,
+  module: true,
+  dispatch,
+  controllerSource: {
+    specifier: '../components/ui-color-picker/ui-color-picker.js',
+    definition: './components/ui-color-picker/ui-color-picker.html',
+  },
+  props: checkedProps,
+  inputs: propInputs,
+  inputTracking,
+  propInputs: (name: string) => {
+    const incoming = hydrationInstance?.vnode.props
+    const kebab = name.replace(/[A-Z]/g, (letter) => '-' + letter.toLowerCase())
+    return incoming !== null && incoming !== undefined
+      ? (incoming[name] ?? incoming[kebab] ?? null)
+      : null
+  },
+  propNames: ['disabled', 'label', 'name', 'round', 'size', 'value'],
+  propValidity: (name: string) =>
+    propValidityState({ contract: propValidityContract, values: { ...props } }, name),
+  refs: {
+    field: fieldElement,
+    trigger: triggerElement,
+    colour: colourElement,
+    editor: editorElement,
+    red: redElement,
+    green: greenElement,
+    blue: blueElement,
+    hex: hexElement,
+  },
+})
+</script>
+
+<template>
+  <span
+    class="ui-color-picker"
+    v-bind="nativeAttrs($attrs)"
+    data-hn
+    v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
+    :data-ui-color-picker-prop-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, undefined, false)"
+    :data-ui-color-picker-prop-label="reflectedProp('label', 'label', checkedProps.label, undefined, false)"
+    :data-ui-color-picker-prop-name="reflectedProp('name', 'name', checkedProps.name, undefined, false)"
+    :data-ui-color-picker-prop-round="reflectedProp('round', 'round', checkedProps.round, undefined, false)"
+    :data-ui-color-picker-prop-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
+    :data-ui-color-picker-prop-value="reflectedProp('value', 'value', checkedProps.value, undefined, false)"
+    :data-ui-color-picker-state="hostState || undefined"
+    ref="root"
+  ><input
+      type="hidden"
+      data-ui-field-value=""
+      :name="checkedProps.name ?? undefined"
+      :disabled="checkedProps.disabled ?? undefined"
+      ref="fieldElement"
+    >{{ ' ' }}<button
+      data-ui-field-control=""
+      type="button"
+      aria-haspopup="dialog"
+      aria-expanded="false"
+      :aria-label="checkedProps.label ?? undefined"
+      :disabled="checkedProps.disabled ?? undefined"
+      ref="triggerElement"
+    >
+      <span class="colour" ref="colourElement"></span>
+    </button>{{ ' ' }}<span
+      class="editor"
+      hidden=""
+      role="dialog"
+      :aria-label="checkedProps.label ?? undefined"
+      ref="editorElement"
+    ><label class="channel">Red<input
+          type="range"
+          min="0"
+          max="255"
+          aria-label="Red"
+          ref="redElement"
+        ></label>{{ ' ' }}<label class="channel">Green<input
+          type="range"
+          min="0"
+          max="255"
+          aria-label="Green"
+          ref="greenElement"
+        ></label>{{ ' ' }}<label class="channel">Blue<input
+          type="range"
+          min="0"
+          max="255"
+          aria-label="Blue"
+          ref="blueElement"
+        ></label>{{ ' ' }}<UiInput
+        class="ui-input"
+        size="sm"
+        aria-label="Hex colour"
+        maxlength="7"
+        spellcheck="false"
+        ref="hexElement"
+      /></span></span>
+</template>
+
+<style scoped>
+@scope (.ui-color-picker) to ([data-hn]) {
+  :global(:scope) {
+    display: inline-flex !important;
+    flex: 0 0 auto;
+    margin: 0 !important;
+    padding: 0 !important;
+    --_size: var(--ui-control-size-md);
+    --_font: 1em;
+    --_padding: var(--ui-control-inset-block-md, var(--ui-space-2));
+  }
+  :global(:scope[data-ui-color-picker-state~="size=sm"]) {
+    --_size: var(--ui-control-size-sm);
+    --_font: var(--ui-font-size-sm);
+    --_padding: var(--ui-control-inset-block-sm, var(--ui-space-1));
+  }
+  :global(:scope[data-ui-color-picker-state~="size=lg"]) {
+    --_size: var(--ui-control-size-lg);
+    --_font: var(--ui-font-size-md);
+    --_padding: var(--ui-control-inset-block-lg, var(--ui-space-3));
+  }
+  :global(button) {
+    --_radius: min(var(--ui-field-radius, var(--ui-radius-md)), calc(var(--_size) / 4));
+    --_inset: min(calc(var(--ui-space-1) * 1.5), calc(var(--_size) / 5));
+    box-sizing: border-box !important;
+    display: inline-grid !important;
+    place-items: center;
+    margin: 0 !important;
+    padding: var(--_inset) !important;
+    inline-size: max(
+      var(--_size),
+      calc(
+        var(--_font) * var(--ui-line-height-tight) + var(--_padding) * 2 +
+          var(--ui-border-width) * 2
+      )
+    );
+    aspect-ratio: 1;
+    flex: 0 0 auto;
+    border: var(--ui-border-width) solid var(--ui-control-border, var(--ui-border-strong));
+    border-radius: var(--_radius);
+    background: var(--ui-control-surface, var(--ui-surface-elevated));
+    box-shadow: var(--ui-control-inset);
+    font: inherit;
+    cursor: pointer;
+    transition:
+      background-color var(--ui-motion-fast) var(--ui-motion-ease),
+      scale var(--ui-motion-press, var(--ui-motion-fast)) var(--ui-motion-ease);
+  }
+  :global(button:hover:not(:disabled)) {
+    background: var(--ui-surface-subtle);
+  }
+  :global(button:active:not(:disabled)) {
+    scale: var(--ui-press-scale, 0.96);
+  }
+  :global(button:focus-visible) {
+    outline: var(--ui-focus-width) solid var(--ui-focus-ring, var(--ui-accent-solid));
+    outline-offset: var(--ui-focus-width);
+  }
+  :global(button:disabled) {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  :global(.colour) {
+    display: block !important;
+    inline-size: 100%;
+    block-size: 100%;
+    border-radius: max(0px, calc(var(--_radius) - var(--_inset) - var(--ui-border-width)));
+    box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.12);
+  }
+  :global(:scope[data-ui-color-picker-state~="round"] button) {
+    border-radius: 50%;
+  }
+  :global(:scope[data-ui-color-picker-state~="round"] .colour) {
+    border-radius: 50%;
+  }
+  :global(.editor) {
+    box-sizing: border-box !important;
+    display: grid !important;
+    gap: var(--ui-space-3) !important;
+    padding: var(--ui-space-4) !important;
+    margin: 0 !important;
+    inline-size: min(18rem, calc(100vw - 1rem));
+    border: var(--ui-border-width) solid var(--ui-border-strong);
+    border-radius: var(--ui-radius-md);
+    background: var(--ui-surface-elevated);
+    color: var(--ui-text-primary);
+    box-shadow: var(--ui-shadow-lg);
+    font: inherit;
+  }
+  :global(.editor[hidden]) {
+    display: none !important;
+  }
+  :global(.channel) {
+    display: grid !important;
+    grid-template-columns: 3.5em 1fr;
+    align-items: center !important;
+    gap: var(--ui-space-2) !important;
+    padding: 0 !important;
+    margin: 0 !important;
+  }
+  :global(input[type="range"]) {
+    inline-size: 100%;
+    min-inline-size: 0;
+    margin: 0 !important;
+    padding: 0 !important;
+    accent-color: var(--ui-accent-solid);
+  }
+  @media (pointer: coarse) {
+    :global(:scope) {
+      --_size: max(var(--ui-control-size-md), var(--ui-control-min-block-size));
+    }
+    :global(:scope[data-ui-color-picker-state~="size=sm"]) {
+      --_size: var(--ui-control-min-block-size);
+      --_font: var(--ui-font-size-md);
+    }
+  }
+}
+</style>