@purestack/ts-components 1.1.0

package/src/standard/form/form.ts

@@ -0,0 +1,205 @@
+import { tryResolveTsSsgContext } from '@purestack/ts-common'
+import type { SemanticTone } from '@purestack/ts-style'
+import { urlNormalizer } from '@purestack/ts-util'
+import {
+  type ComponentHead,
+  type ComputedRef,
+  computed,
+  defineComponent,
+  html,
+  type RefOrValue,
+  unref,
+} from 'regor'
+import {
+  type ComponentVariant,
+  resolveComponentClasses,
+} from '../componentVariant'
+import { defineFormCheckComponent } from './formCheck'
+
+export interface AppForm {
+  action?: RefOrValue<string>
+  method?: RefOrValue<string>
+  tone?: RefOrValue<SemanticTone>
+  variant?: RefOrValue<ComponentVariant>
+  classes?: ComputedRef<string>
+}
+
+export interface FormMeta {}
+
+export interface FormAssistLink {
+  href?: RefOrValue<string>
+  label?: RefOrValue<string>
+  target?: RefOrValue<string>
+  rel?: RefOrValue<string>
+  normalizedHref?: ComputedRef<string | undefined>
+  resolvedRel?: ComputedRef<string | undefined>
+}
+
+export interface FormSubmit {
+  label?: RefOrValue<string>
+  tone?: RefOrValue<SemanticTone>
+  variant?: RefOrValue<ComponentVariant>
+}
+
+export interface FormDivider {
+  label?: RefOrValue<string>
+}
+
+export interface FormStatus {
+  tone?: RefOrValue<SemanticTone>
+  variant?: RefOrValue<ComponentVariant>
+  hidden?: RefOrValue<boolean>
+  classes?: ComputedRef<string>
+}
+
+const appFormTemplate = html`<form
+  class="form-block"
+  :class="classes"
+  :action="action"
+  :method="method"
+  novalidate
+>
+  <slot></slot>
+</form>`
+
+const formMetaTemplate = html`<div class="form-block__meta"><slot></slot></div>`
+
+const formAssistLinkTemplate = html`<a
+  class="form-block__assist-link"
+  :href="normalizedHref"
+  r-if="normalizedHref"
+  :target="target"
+  :rel="resolvedRel"
+>
+  {{ label }}
+</a>`
+
+const formSubmitTemplate = html`<Btn type="submit" :tone="tone" :variant="variant">{{ label }}</Btn>`
+
+const formDividerTemplate = html`<div class="form-block__divider" :data-label="label"></div>`
+
+const formStatusTemplate = html`<div
+  class="form-status"
+  :class="classes"
+  role="status"
+  aria-live="polite"
+  :hidden="hidden"
+>
+  <slot></slot>
+</div>`
+
+function defineAppFormComponent() {
+  return defineComponent<AppForm>(appFormTemplate, {
+    props: ['action', 'method', 'tone', 'variant'],
+    context: (head) => resolveAppForm(head),
+  })
+}
+
+function defineFormMetaComponent() {
+  return defineComponent<FormMeta>(formMetaTemplate, {})
+}
+
+function defineFormAssistLinkComponent() {
+  return defineComponent<FormAssistLink>(formAssistLinkTemplate, {
+    props: ['href', 'label', 'target', 'rel'],
+    context: (head) => resolveFormAssistLink(head),
+  })
+}
+
+function defineFormSubmitComponent() {
+  return defineComponent<FormSubmit>(formSubmitTemplate, {
+    props: ['label', 'tone', 'variant'],
+    context: (head) => resolveFormSubmit(head),
+  })
+}
+
+function defineFormDividerComponent() {
+  return defineComponent<FormDivider>(formDividerTemplate, {
+    props: ['label'],
+    context: (head) => head.props,
+  })
+}
+
+function defineFormStatusComponent() {
+  return defineComponent<FormStatus>(formStatusTemplate, {
+    props: ['tone', 'variant', 'hidden'],
+    context: (head) => resolveFormStatus(head),
+  })
+}
+
+export function defineFormComponents() {
+  return {
+    appForm: defineAppFormComponent(),
+    formMeta: defineFormMetaComponent(),
+    formCheck: defineFormCheckComponent(),
+    formAssistLink: defineFormAssistLinkComponent(),
+    formSubmit: defineFormSubmitComponent(),
+    formDivider: defineFormDividerComponent(),
+    formStatus: defineFormStatusComponent(),
+  }
+}
+
+function resolveAppForm(head: ComponentHead<AppForm>): AppForm {
+  const props = head.props
+  return {
+    ...props,
+    action: resolvePublicAction(head),
+    classes: computed(() =>
+      resolveComponentClasses(props, {
+        defaultVariant: 'none',
+      }),
+    ),
+  }
+}
+
+function resolvePublicAction(head: ComponentHead<AppForm>) {
+  const action = unref(head.props.action)
+  if (!action) return action
+  return tryResolveTsSsgContext(head)?.resolvePublicHref(action) ?? action
+}
+
+function resolveFormAssistLink(
+  head: ComponentHead<FormAssistLink>,
+): FormAssistLink {
+  return {
+    ...head.props,
+    normalizedHref: computed(() =>
+      resolvePublicHref(
+        urlNormalizer.normalizeHref(unref(head.props.href)),
+        head,
+      ),
+    ),
+    resolvedRel: computed(
+      () =>
+        unref(head.props.rel) ||
+        (unref(head.props.target) === '_blank'
+          ? 'noopener noreferrer'
+          : undefined),
+    ),
+  }
+}
+
+function resolvePublicHref(
+  href: string | undefined,
+  head: ComponentHead<FormAssistLink>,
+) {
+  if (!href) return undefined
+  return tryResolveTsSsgContext(head)?.resolvePublicHref(href) ?? href
+}
+
+function resolveFormSubmit(head: ComponentHead<FormSubmit>): FormSubmit {
+  return {
+    ...head.props,
+  }
+}
+
+function resolveFormStatus(head: ComponentHead<FormStatus>): FormStatus {
+  return {
+    ...head.props,
+    classes: computed(() =>
+      resolveComponentClasses(head.props, {
+        defaultVariant: 'surface',
+      }),
+    ),
+  }
+}

package/src/standard/form/formCheck.ts

@@ -0,0 +1,96 @@
+import type { SemanticTone } from '@purestack/ts-style'
+import {
+  type ComponentHead,
+  type ComputedRef,
+  computed,
+  defineComponent,
+  html,
+  isRef,
+  type Ref,
+  type RefOrValue,
+  ref,
+  unref,
+} from 'regor'
+import { createAutoId } from '../autoId'
+import { resolveComponentClasses } from '../componentVariant'
+
+const resolveCheckId = createAutoId('form-check')
+
+export class FormCheck {
+  readonly id: string
+  label?: RefOrValue<string>
+  name?: RefOrValue<string>
+  value?: RefOrValue<string>
+  checked?: Ref<boolean>
+  disabled?: RefOrValue<boolean>
+  tone?: RefOrValue<SemanticTone>
+  rootClass?: RefOrValue<string>
+  hasLabel?: ComputedRef<boolean>
+  classes?: ComputedRef<string>
+
+  constructor(props: FormCheck) {
+    Object.assign(this, props)
+    this.id = resolveCheckId(props.id)
+    if (!isRef(this.checked)) {
+      this.checked = ref<boolean>(resolveInitialChecked(this.checked))
+    }
+  }
+}
+
+const formCheckTemplate = html`<label class="form-block__check" :class="classes" :for="id">
+  <input
+    :id="id"
+    class="form-block__check-input"
+    type="checkbox"
+    :name="name"
+    :value="value"
+    :disabled="disabled"
+    r-model="checked"
+    r-inherit/>
+  <span class="form-block__check-control" aria-hidden="true"></span>
+  <span class="form-block__check-label" r-if="hasLabel">{{ label }}</span>
+</label>`
+
+export function defineFormCheckComponent() {
+  return defineComponent<FormCheck>(formCheckTemplate, {
+    props: [
+      'id',
+      'label',
+      'name',
+      'value',
+      'checked',
+      'disabled',
+      'tone',
+      'rootClass',
+    ],
+    context: (head) => resolveFormCheck(head),
+  })
+}
+
+function resolveFormCheck(head: ComponentHead<FormCheck>): FormCheck {
+  const check = new FormCheck(head.props)
+  check.hasLabel = computed(() => hasCheckLabel(head.props.label))
+  check.classes = computed(() =>
+    resolveComponentClasses(head.props, {
+      defaultVariant: 'none',
+      classes: [
+        check.hasLabel?.() ? undefined : 'form-block__check--bare',
+        head.props.rootClass,
+      ],
+    }),
+  )
+  return check
+}
+
+function hasCheckLabel(label: RefOrValue<string> | undefined) {
+  const value = unref(label)
+  return typeof value === 'string' ? value.trim().length > 0 : Boolean(value)
+}
+
+function resolveInitialChecked(value: unknown) {
+  if (typeof value === 'string') {
+    const normalized = value.trim().toLowerCase()
+    return normalized !== '' && normalized !== 'false'
+  }
+  return !!value
+}

package/src/standard/form/formInputField.ts

@@ -0,0 +1,184 @@
+import type { SemanticTone } from '@purestack/ts-style'
+import {
+  type ComponentHead,
+  type ComputedRef,
+  computed,
+  defineComponent,
+  html,
+  type Ref,
+  type RefOrValue,
+  ref,
+  unref,
+} from 'regor'
+import { createAutoId } from '../autoId'
+import {
+  type ComponentVariant,
+  resolveComponentClasses,
+} from '../componentVariant'
+
+const resolveInputId = createAutoId('form-input')
+
+export type FormInputFieldType =
+  | 'color'
+  | 'text'
+  | 'email'
+  | 'password'
+  | 'number'
+  | 'tel'
+  | 'url'
+  | 'search'
+  | 'date'
+  | 'time'
+  | 'datetime-local'
+  | 'month'
+  | 'week'
+
+export class FormInputField {
+  readonly id: string
+  readonly label?: RefOrValue<string>
+  readonly tone?: RefOrValue<SemanticTone>
+  readonly variant?: RefOrValue<ComponentVariant>
+  declare readonly model: Ref<string | number>
+  readonly type?: RefOrValue<FormInputFieldType>
+  readonly name?: RefOrValue<string>
+  readonly required?: RefOrValue<boolean>
+  readonly autocomplete?: RefOrValue<string>
+  readonly min?: RefOrValue<number | string>
+  readonly step?: RefOrValue<number | string>
+  readonly placeholder?: RefOrValue<string>
+  readonly disabled?: RefOrValue<boolean>
+  readonly icon?: RefOrValue<string>
+  readonly iconEnd?: RefOrValue<string>
+  classes?: ComputedRef<string>
+
+  constructor(props: FormInputField) {
+    Object.assign(this, {
+      ...props,
+    })
+    this.id = resolveInputId(props.id)
+    if (!this.model) this.model = ref<string | number>('')
+  }
+
+  get isNumberField() {
+    return unref(this.type) === 'number'
+  }
+
+  increment = () => {
+    this.stepBy(1)
+  }
+
+  decrement = () => {
+    this.stepBy(-1)
+  }
+
+  private stepBy(direction: 1 | -1) {
+    const current = this.readCurrentNumber()
+    const step = this.readStep()
+    const min = this.readMin()
+    let next = current + direction * step
+    if (min !== undefined && next < min) {
+      next = min
+    }
+    const modelRef = this.model
+    if (modelRef) modelRef(next)
+  }
+
+  private readCurrentNumber() {
+    const raw = unref(this.model)
+    const numeric =
+      typeof raw === 'number' ? raw : Number.parseFloat(String(raw ?? '0'))
+    return Number.isFinite(numeric) ? numeric : 0
+  }
+
+  private readMin() {
+    const min = unref(this.min)
+    if (min === undefined) return undefined
+    const value = typeof min === 'number' ? min : Number.parseFloat(min)
+    return Number.isFinite(value) ? value : undefined
+  }
+
+  private readStep() {
+    const step = unref(this.step)
+    if (step === undefined) return 1
+    const value = typeof step === 'number' ? step : Number.parseFloat(step)
+    return Number.isFinite(value) && value > 0 ? value : 1
+  }
+}
+
+const formInputFieldTemplate = html`<label class="form-block__field" :for="id">
+  <span class="form-block__label" r-if="label">{{ label }}</span>
+  <div class="form-block__input-shell" :class="classes">
+    <Icon class="form-block__input-icon" :name="icon" r-if="icon"/>
+    <input
+      :id="id"
+      class="form-block__input"
+      :class="{ 'form-block__input--number': isNumberField }"
+      :type="isNumberField ? 'number' : type || 'text'"
+      :name="name"
+      :required="required"
+      :autocomplete="autocomplete || 'off'"
+      :min="min"
+      :step="step"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      r-model="model"
+      r-inherit/>
+    <div class="form-block__number-controls" r-if="isNumberField">
+      <button
+        class="form-block__number-btn form-block__number-btn--up tone-fill-button-all"
+        type="button"
+        aria-label="Increase value"
+        @click="increment"
+        :disabled="disabled"
+        tabindex="-1"
+      >
+        +
+      </button>
+      <button
+        class="form-block__number-btn form-block__number-btn--down tone-fill-button-all"
+        type="button"
+        aria-label="Decrease value"
+        @click="decrement"
+        :disabled="disabled"
+        tabindex="-1"
+      >
+        -
+      </button>
+    </div>
+    <Icon class="form-block__input-icon" :name="iconEnd" r-if="iconEnd"/>
+  </div>
+</label>`
+export function defineFormInputField() {
+  return {
+    formInputField: defineComponent<FormInputField>(formInputFieldTemplate, {
+      props: [
+        'id',
+        'label',
+        'tone',
+        'variant',
+        'model',
+        'type',
+        'name',
+        'required',
+        'autocomplete',
+        'min',
+        'step',
+        'placeholder',
+        'disabled',
+        'icon',
+        'iconEnd',
+      ],
+      context: (head) => resolveFormInputField(head),
+    }),
+  }
+}
+
+function resolveFormInputField(head: ComponentHead<FormInputField>) {
+  const field = new FormInputField(head.props)
+  field.classes = computed(() =>
+    resolveComponentClasses(head.props, {
+      defaultVariant: 'surfaceAlt',
+    }),
+  )
+  return field
+}

package/src/standard/form/formSelectField.ts

@@ -0,0 +1,152 @@
+import type { SemanticTone } from '@purestack/ts-style'
+import {
+  type ComponentHead,
+  type ComputedRef,
+  computed,
+  defineComponent,
+  html,
+  type Ref,
+  type RefOrValue,
+  ref,
+  unref,
+} from 'regor'
+import { createAutoId } from '../autoId'
+import {
+  type ComponentVariant,
+  resolveComponentClasses,
+} from '../componentVariant'
+
+const resolveSelectId = createAutoId('form-select')
+
+export type FormSelectValue = string | number
+
+export interface FormSelectOption {
+  label: RefOrValue<string>
+  value?: RefOrValue<FormSelectValue>
+  disabled?: RefOrValue<boolean>
+}
+
+export interface ResolvedFormSelectOption {
+  label: string
+  value: FormSelectValue
+  disabled?: boolean
+}
+
+export class FormSelectField {
+  readonly id: string
+  readonly label?: RefOrValue<string>
+  readonly tone?: RefOrValue<SemanticTone>
+  readonly variant?: RefOrValue<ComponentVariant>
+  declare readonly model: Ref<FormSelectValue>
+  readonly name?: RefOrValue<string>
+  readonly required?: RefOrValue<boolean>
+  readonly autocomplete?: RefOrValue<string>
+  readonly placeholder?: RefOrValue<string>
+  readonly disabled?: RefOrValue<boolean>
+  readonly icon?: RefOrValue<string>
+  readonly iconEnd?: RefOrValue<string>
+  readonly options?: RefOrValue<FormSelectOption[]>
+  classes?: ComputedRef<string>
+  resolvedOptions?: ComputedRef<ResolvedFormSelectOption[]>
+  resolvedIconEnd?: ComputedRef<string>
+  hasPlaceholder?: ComputedRef<boolean>
+
+  constructor(props: FormSelectField) {
+    Object.assign(this, {
+      ...props,
+    })
+    this.id = resolveSelectId(props.id)
+    if (!this.model) this.model = ref<FormSelectValue>('')
+  }
+}
+
+const formSelectFieldTemplate = html`<label class="form-block__field" :for="id">
+  <span class="form-block__label" r-if="label">{{ label }}</span>
+  <div
+    class="form-block__input-shell form-block__select-shell"
+    :class="classes"
+  >
+    <Icon
+      class="form-block__input-icon"
+      :name="icon"
+      r-if="icon"
+      style="pointer-events: none"/>
+    <select
+      :id="id"
+      class="form-block__input form-block__select"
+      :name="name"
+      :required="required"
+      :autocomplete="autocomplete || 'off'"
+      :disabled="disabled"
+      r-model="model"
+      r-inherit
+    >
+      <option value="" disabled r-if="hasPlaceholder">{{ placeholder }}</option>
+      <option
+        r-for="option in resolvedOptions"
+        :value="option.value"
+        :disabled="option.disabled"
+      >
+        {{ option.label }}
+      </option>
+    </select>
+    <Icon
+      class="form-block__input-icon"
+      :name="resolvedIconEnd"/>
+  </div>
+</label>`
+
+export function defineFormSelectField() {
+  return {
+    formSelectField: defineComponent<FormSelectField>(formSelectFieldTemplate, {
+      props: [
+        'id',
+        'label',
+        'tone',
+        'variant',
+        'model',
+        'name',
+        'required',
+        'autocomplete',
+        'placeholder',
+        'disabled',
+        'icon',
+        'iconEnd',
+        'options',
+      ],
+      context: (head) => resolveFormSelectField(head),
+    }),
+  }
+}
+
+function resolveFormSelectField(head: ComponentHead<FormSelectField>) {
+  const field = new FormSelectField(head.props)
+  field.classes = computed(() =>
+    resolveComponentClasses(head.props, {
+      defaultVariant: 'surfaceAlt',
+    }),
+  )
+  field.resolvedOptions = computed(() => {
+    const options = (unref(head.props.options) || []) as Array<
+      RefOrValue<FormSelectOption>
+    >
+    return options.map((option) => resolveSelectOption(option))
+  })
+  field.resolvedIconEnd = computed(
+    () => unref(head.props.iconEnd) || 'lucide:chevron-down',
+  )
+  field.hasPlaceholder = computed(() => Boolean(unref(head.props.placeholder)))
+  return field
+}
+
+function resolveSelectOption(
+  optionInput: RefOrValue<FormSelectOption>,
+): ResolvedFormSelectOption {
+  const option = unref(optionInput)
+  const label = unref(option.label)
+  return {
+    label,
+    value: unref(option.value) ?? label,
+    disabled: unref(option.disabled),
+  }
+}