DatePicker

Date picker with v-model support. Wraps the Polaris <s-date-picker> web component.

Usage

<script setup>
const date = ref('')
</script>

<template>
  <ShDatePicker v-model="date" type="single" />
</template>

Prop	Type	Default	Description
`modelValue`	`string`	—	Bound value (use with `v-model`)
`type`	`'single' \| 'range'`	—	Selection type
`defaultView`	`string`	—	Default calendar view
`view`	`string`	—	Current calendar view
`allow`	`string`	—	Allowed date range
`disallow`	`string`	—	Disallowed date range
`allowDays`	`string`	—	Allowed days of week
`disallowDays`	`string`	—	Disallowed days of week
`defaultValue`	`string`	—	Default value (uncontrolled)
`name`	`string`	—	Form field name

Event	Payload	Description
`update:modelValue`	`string`	Emitted when value changes (v-model)
`change`	`Event`	Native change event
`input`	`Event`	Native input event
`focus`	`Event`	Emitted on focus
`blur`	`Event`	Emitted on blur
`viewchange`	`Event`	Emitted when the calendar view changes

Slot	Description
`default`	Additional content

Renders as <s-date-picker>. See Polaris DatePicker docs.

ColorPicker

Color picker with v-model support. Wraps the Polaris <s-color-picker> web component.

Banner

Informational banner with tones. Wraps the Polaris <s-banner> web component.