shopify-nuxt 0.0.1 → 0.0.2

package/dist/runtime/components/polaris/ShImage.vue

@@ -1,14 +1,16 @@
 <template>
-  <s-image v-bind="$attrs">
+  <s-image v-bind="polarisAttrs">
     <slot />
   </s-image>
 </template>
 
 <script setup>
+import { usePolarisAttrs } from "./utils";
 defineOptions({ name: "ShImage", inheritAttrs: false });
-defineProps({
+const props = defineProps({
   id: { type: String, required: false },
   originalSrc: { type: String, required: false },
   altText: { type: String, required: false }
 });
+const polarisAttrs = usePolarisAttrs(props);
 </script>

package/dist/runtime/components/polaris/ShLink.vue

@@ -1,12 +1,13 @@
 <template>
-  <s-link v-bind="$attrs">
+  <s-link v-bind="polarisAttrs">
     <slot />
   </s-link>
 </template>
 
 <script setup>
+import { usePolarisAttrs } from "./utils";
 defineOptions({ name: "ShLink", inheritAttrs: false });
-defineProps({
+const props = defineProps({
   tone: { type: String, required: false },
   accessibilityLabel: { type: String, required: false },
   href: { type: String, required: false },
@@ -17,4 +18,5 @@ defineProps({
   commandFor: { type: String, required: false },
   interestFor: { type: String, required: false }
 });
+const polarisAttrs = usePolarisAttrs(props);
 </script>

package/dist/runtime/components/polaris/ShMenu.vue

@@ -1,12 +1,14 @@
 <template>
-  <s-menu v-bind="$attrs">
+  <s-menu v-bind="polarisAttrs">
     <slot />
   </s-menu>
 </template>
 
 <script setup>
+import { usePolarisAttrs } from "./utils";
 defineOptions({ name: "ShMenu", inheritAttrs: false });
-defineProps({
+const props = defineProps({
   accessibilityLabel: { type: String, required: false }
 });
+const polarisAttrs = usePolarisAttrs(props);
 </script>

package/dist/runtime/components/polaris/ShModal.vue

@@ -1,15 +1,17 @@
 <template>
-  <s-modal v-bind="$attrs">
+  <s-modal v-bind="polarisAttrs">
     <slot />
   </s-modal>
 </template>
 
 <script setup>
+import { usePolarisAttrs } from "./utils";
 defineOptions({ name: "ShModal", inheritAttrs: false });
-defineProps({
+const props = defineProps({
   accessibilityLabel: { type: String, required: false },
   heading: { type: String, required: false },
   padding: { type: String, required: false },
   size: { type: String, required: false }
 });
+const polarisAttrs = usePolarisAttrs(props);
 </script>

package/dist/runtime/components/polaris/ShMoneyField.d.vue.ts

@@ -1,7 +1,6 @@
 type __VLS_Props = {
     max?: number;
     min?: number;
-    value?: string;
     autocomplete?: string;
     defaultValue?: string;
     details?: string;
@@ -14,12 +13,25 @@ type __VLS_Props = {
     disabled?: boolean;
     id?: string;
     name?: string;
+    modelValue?: string;
 };
-declare var __VLS_8: {};
+declare var __VLS_13: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_8) => any;
+    default?: (props: typeof __VLS_13) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (v: string) => void;
+    blur: (event: InputEvent) => void;
+    change: (event: InputEvent) => void;
+    focus: (event: InputEvent) => void;
+    input: (event: InputEvent) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onBlur?: ((event: InputEvent) => any) | undefined;
+    onChange?: ((event: InputEvent) => any) | undefined;
+    onFocus?: ((event: InputEvent) => any) | undefined;
+    onInput?: ((event: InputEvent) => any) | undefined;
+    "onUpdate:modelValue"?: ((v: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/polaris/ShMoneyField.vue

@@ -1,15 +1,28 @@
 <template>
-  <s-money-field v-bind="$attrs">
+  <s-money-field
+    v-bind="polarisAttrs"
+    :value="modelValue"
+    @blur="emit('blur', $event)"
+    @change="emit('change', $event)"
+    @focus="emit('focus', $event)"
+    @input="
+  (evt) => {
+    emit('input', evt);
+    value = evt.currentTarget?.value || '';
+  }
+"
+  >
     <slot />
   </s-money-field>
 </template>
 
 <script setup>
+import { computed } from "vue";
+import { usePolarisAttrs } from "./utils";
 defineOptions({ name: "ShMoneyField", inheritAttrs: false });
-defineProps({
+const props = defineProps({
   max: { type: Number, required: false },
   min: { type: Number, required: false },
-  value: { type: String, required: false },
   autocomplete: { type: String, required: false },
   defaultValue: { type: String, required: false },
   details: { type: String, required: false },
@@ -21,6 +34,13 @@ defineProps({
   required: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false },
   id: { type: String, required: false },
-  name: { type: String, required: false }
+  name: { type: String, required: false },
+  modelValue: { type: String, required: false }
 });
+const emit = defineEmits(["update:modelValue", "blur", "change", "focus", "input"]);
+const value = computed({
+  get: () => props.modelValue,
+  set: (v) => emit("update:modelValue", v)
+});
+const polarisAttrs = usePolarisAttrs(props, ["modelValue"]);
 </script>

package/dist/runtime/components/polaris/ShMoneyField.vue.d.ts

@@ -1,7 +1,6 @@
 type __VLS_Props = {
     max?: number;
     min?: number;
-    value?: string;
     autocomplete?: string;
     defaultValue?: string;
     details?: string;
@@ -14,12 +13,25 @@ type __VLS_Props = {
     disabled?: boolean;
     id?: string;
     name?: string;
+    modelValue?: string;
 };
-declare var __VLS_8: {};
+declare var __VLS_13: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_8) => any;
+    default?: (props: typeof __VLS_13) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (v: string) => void;
+    blur: (event: InputEvent) => void;
+    change: (event: InputEvent) => void;
+    focus: (event: InputEvent) => void;
+    input: (event: InputEvent) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onBlur?: ((event: InputEvent) => any) | undefined;
+    onChange?: ((event: InputEvent) => any) | undefined;
+    onFocus?: ((event: InputEvent) => any) | undefined;
+    onInput?: ((event: InputEvent) => any) | undefined;
+    "onUpdate:modelValue"?: ((v: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/polaris/ShNumberField.d.vue.ts

@@ -1,5 +1,4 @@
 type __VLS_Props = {
-    value?: string;
     inputMode?: 'decimal' | 'numeric';
     step?: number;
     max?: number;
@@ -18,12 +17,25 @@ type __VLS_Props = {
     disabled?: boolean;
     id?: string;
     name?: string;
+    modelValue?: string;
 };
-declare var __VLS_8: {};
+declare var __VLS_13: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_8) => any;
+    default?: (props: typeof __VLS_13) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (v: string) => void;
+    blur: (event: InputEvent) => void;
+    change: (event: InputEvent) => void;
+    focus: (event: InputEvent) => void;
+    input: (event: InputEvent) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onBlur?: ((event: InputEvent) => any) | undefined;
+    onChange?: ((event: InputEvent) => any) | undefined;
+    onFocus?: ((event: InputEvent) => any) | undefined;
+    onInput?: ((event: InputEvent) => any) | undefined;
+    "onUpdate:modelValue"?: ((v: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/polaris/ShNumberField.vue

@@ -1,13 +1,26 @@
 <template>
-  <s-number-field v-bind="$attrs">
+  <s-number-field
+    v-bind="polarisAttrs"
+    :value="modelValue"
+    @blur="emit('blur', $event)"
+    @change="emit('change', $event)"
+    @focus="emit('focus', $event)"
+    @input="
+  (evt) => {
+    emit('input', evt);
+    value = evt.currentTarget?.value || '';
+  }
+"
+  >
     <slot />
   </s-number-field>
 </template>
 
 <script setup>
+import { computed } from "vue";
+import { usePolarisAttrs } from "./utils";
 defineOptions({ name: "ShNumberField", inheritAttrs: false });
-defineProps({
-  value: { type: String, required: false },
+const props = defineProps({
   inputMode: { type: String, required: false },
   step: { type: Number, required: false },
   max: { type: Number, required: false },
@@ -25,6 +38,13 @@ defineProps({
   required: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false },
   id: { type: String, required: false },
-  name: { type: String, required: false }
+  name: { type: String, required: false },
+  modelValue: { type: String, required: false }
 });
+const emit = defineEmits(["update:modelValue", "blur", "change", "focus", "input"]);
+const value = computed({
+  get: () => props.modelValue,
+  set: (v) => emit("update:modelValue", v)
+});
+const polarisAttrs = usePolarisAttrs(props, ["modelValue"]);
 </script>

package/dist/runtime/components/polaris/ShNumberField.vue.d.ts

@@ -1,5 +1,4 @@
 type __VLS_Props = {
-    value?: string;
     inputMode?: 'decimal' | 'numeric';
     step?: number;
     max?: number;
@@ -18,12 +17,25 @@ type __VLS_Props = {
     disabled?: boolean;
     id?: string;
     name?: string;
+    modelValue?: string;
 };
-declare var __VLS_8: {};
+declare var __VLS_13: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_8) => any;
+    default?: (props: typeof __VLS_13) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (v: string) => void;
+    blur: (event: InputEvent) => void;
+    change: (event: InputEvent) => void;
+    focus: (event: InputEvent) => void;
+    input: (event: InputEvent) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onBlur?: ((event: InputEvent) => any) | undefined;
+    onChange?: ((event: InputEvent) => any) | undefined;
+    onFocus?: ((event: InputEvent) => any) | undefined;
+    onInput?: ((event: InputEvent) => any) | undefined;
+    "onUpdate:modelValue"?: ((v: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/polaris/ShOption.vue

@@ -1,15 +1,17 @@
 <template>
-  <s-option v-bind="$attrs">
+  <s-option v-bind="polarisAttrs">
     <slot />
   </s-option>
 </template>
 
 <script setup>
+import { usePolarisAttrs } from "./utils";
 defineOptions({ name: "ShOption", inheritAttrs: false });
-defineProps({
+const props = defineProps({
   selected: { type: Boolean, required: false },
   defaultSelected: { type: Boolean, required: false },
   value: { type: String, required: false },
   disabled: { type: Boolean, required: false }
 });
+const polarisAttrs = usePolarisAttrs(props);
 </script>

package/dist/runtime/components/polaris/ShOptionGroup.vue

@@ -1,13 +1,15 @@
 <template>
-  <s-option-group v-bind="$attrs">
+  <s-option-group v-bind="polarisAttrs">
     <slot />
   </s-option-group>
 </template>
 
 <script setup>
+import { usePolarisAttrs } from "./utils";
 defineOptions({ name: "ShOptionGroup", inheritAttrs: false });
-defineProps({
+const props = defineProps({
   disabled: { type: Boolean, required: false },
   label: { type: String, required: false }
 });
+const polarisAttrs = usePolarisAttrs(props);
 </script>

package/dist/runtime/components/polaris/ShPage.vue

@@ -1,13 +1,15 @@
 <template>
-  <s-page v-bind="$attrs">
+  <s-page v-bind="polarisAttrs">
     <slot />
   </s-page>
 </template>
 
 <script setup>
+import { usePolarisAttrs } from "./utils";
 defineOptions({ name: "ShPage", inheritAttrs: false });
-defineProps({
+const props = defineProps({
   inlineSize: { type: String, required: false },
   heading: { type: String, required: false }
 });
+const polarisAttrs = usePolarisAttrs(props);
 </script>

package/dist/runtime/components/polaris/ShParagraph.vue

@@ -1,12 +1,13 @@
 <template>
-  <s-paragraph v-bind="$attrs">
+  <s-paragraph v-bind="polarisAttrs">
     <slot />
   </s-paragraph>
 </template>
 
 <script setup>
+import { usePolarisAttrs } from "./utils";
 defineOptions({ name: "ShParagraph", inheritAttrs: false });
-defineProps({
+const props = defineProps({
   fontVariantNumeric: { type: String, required: false },
   lineClamp: { type: Number, required: false },
   tone: { type: String, required: false },
@@ -14,4 +15,5 @@ defineProps({
   dir: { type: String, required: false },
   accessibilityVisibility: { type: String, required: false }
 });
+const polarisAttrs = usePolarisAttrs(props);
 </script>

package/dist/runtime/components/polaris/ShPasswordField.d.vue.ts

@@ -1,7 +1,6 @@
 type __VLS_Props = {
     maxLength?: number;
     minLength?: number;
-    value?: string;
     autocomplete?: string;
     defaultValue?: string;
     details?: string;
@@ -14,12 +13,25 @@ type __VLS_Props = {
     disabled?: boolean;
     id?: string;
     name?: string;
+    modelValue?: string;
 };
-declare var __VLS_8: {};
+declare var __VLS_13: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_8) => any;
+    default?: (props: typeof __VLS_13) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (v: string) => void;
+    blur: (event: InputEvent) => void;
+    change: (event: InputEvent) => void;
+    focus: (event: InputEvent) => void;
+    input: (event: InputEvent) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onBlur?: ((event: InputEvent) => any) | undefined;
+    onChange?: ((event: InputEvent) => any) | undefined;
+    onFocus?: ((event: InputEvent) => any) | undefined;
+    onInput?: ((event: InputEvent) => any) | undefined;
+    "onUpdate:modelValue"?: ((v: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/polaris/ShPasswordField.vue

@@ -1,15 +1,28 @@
 <template>
-  <s-password-field v-bind="$attrs">
+  <s-password-field
+    v-bind="polarisAttrs"
+    :value="modelValue"
+    @blur="emit('blur', $event)"
+    @change="emit('change', $event)"
+    @focus="emit('focus', $event)"
+    @input="
+  (evt) => {
+    emit('input', evt);
+    value = evt.currentTarget?.value || '';
+  }
+"
+  >
     <slot />
   </s-password-field>
 </template>
 
 <script setup>
+import { computed } from "vue";
+import { usePolarisAttrs } from "./utils";
 defineOptions({ name: "ShPasswordField", inheritAttrs: false });
-defineProps({
+const props = defineProps({
   maxLength: { type: Number, required: false },
   minLength: { type: Number, required: false },
-  value: { type: String, required: false },
   autocomplete: { type: String, required: false },
   defaultValue: { type: String, required: false },
   details: { type: String, required: false },
@@ -21,6 +34,13 @@ defineProps({
   required: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false },
   id: { type: String, required: false },
-  name: { type: String, required: false }
+  name: { type: String, required: false },
+  modelValue: { type: String, required: false }
 });
+const emit = defineEmits(["update:modelValue", "blur", "change", "focus", "input"]);
+const value = computed({
+  get: () => props.modelValue,
+  set: (v) => emit("update:modelValue", v)
+});
+const polarisAttrs = usePolarisAttrs(props, ["modelValue"]);
 </script>

package/dist/runtime/components/polaris/ShPasswordField.vue.d.ts

@@ -1,7 +1,6 @@
 type __VLS_Props = {
     maxLength?: number;
     minLength?: number;
-    value?: string;
     autocomplete?: string;
     defaultValue?: string;
     details?: string;
@@ -14,12 +13,25 @@ type __VLS_Props = {
     disabled?: boolean;
     id?: string;
     name?: string;
+    modelValue?: string;
 };
-declare var __VLS_8: {};
+declare var __VLS_13: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_8) => any;
+    default?: (props: typeof __VLS_13) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (v: string) => void;
+    blur: (event: InputEvent) => void;
+    change: (event: InputEvent) => void;
+    focus: (event: InputEvent) => void;
+    input: (event: InputEvent) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onBlur?: ((event: InputEvent) => any) | undefined;
+    onChange?: ((event: InputEvent) => any) | undefined;
+    onFocus?: ((event: InputEvent) => any) | undefined;
+    onInput?: ((event: InputEvent) => any) | undefined;
+    "onUpdate:modelValue"?: ((v: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/polaris/ShPopover.d.vue.ts

@@ -1,4 +1,5 @@
 type __VLS_Props = {
+    id: string;
     blockSize?: string;
     minBlockSize?: string;
     maxBlockSize?: string;

package/dist/runtime/components/polaris/ShPopover.vue

@@ -1,12 +1,14 @@
 <template>
-  <s-popover v-bind="$attrs">
+  <s-popover v-bind="polarisAttrs">
     <slot />
   </s-popover>
 </template>
 
 <script setup>
+import { usePolarisAttrs } from "./utils";
 defineOptions({ name: "ShPopover", inheritAttrs: false });
-defineProps({
+const props = defineProps({
+  id: { type: String, required: true },
   blockSize: { type: String, required: false },
   minBlockSize: { type: String, required: false },
   maxBlockSize: { type: String, required: false },
@@ -14,4 +16,5 @@ defineProps({
   minInlineSize: { type: String, required: false },
   maxInlineSize: { type: String, required: false }
 });
+const polarisAttrs = usePolarisAttrs(props);
 </script>

package/dist/runtime/components/polaris/ShPopover.vue.d.ts

@@ -1,4 +1,5 @@
 type __VLS_Props = {
+    id: string;
     blockSize?: string;
     minBlockSize?: string;
     maxBlockSize?: string;

package/dist/runtime/components/polaris/ShQueryContainer.vue

@@ -1,12 +1,14 @@
 <template>
-  <s-query-container v-bind="$attrs">
+  <s-query-container v-bind="polarisAttrs">
     <slot />
   </s-query-container>
 </template>
 
 <script setup>
+import { usePolarisAttrs } from "./utils";
 defineOptions({ name: "ShQueryContainer", inheritAttrs: false });
-defineProps({
+const props = defineProps({
   containerName: { type: String, required: false }
 });
+const polarisAttrs = usePolarisAttrs(props);
 </script>

package/dist/runtime/components/polaris/ShSearchField.d.vue.ts

@@ -1,7 +1,6 @@
 type __VLS_Props = {
     maxLength?: number;
     minLength?: number;
-    value?: string;
     autocomplete?: string;
     defaultValue?: string;
     details?: string;
@@ -14,12 +13,25 @@ type __VLS_Props = {
     disabled?: boolean;
     id?: string;
     name?: string;
+    modelValue?: string;
 };
-declare var __VLS_8: {};
+declare var __VLS_13: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_8) => any;
+    default?: (props: typeof __VLS_13) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (v: string) => void;
+    blur: (event: InputEvent) => void;
+    change: (event: InputEvent) => void;
+    focus: (event: InputEvent) => void;
+    input: (event: InputEvent) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onBlur?: ((event: InputEvent) => any) | undefined;
+    onChange?: ((event: InputEvent) => any) | undefined;
+    onFocus?: ((event: InputEvent) => any) | undefined;
+    onInput?: ((event: InputEvent) => any) | undefined;
+    "onUpdate:modelValue"?: ((v: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/polaris/ShSearchField.vue

@@ -1,15 +1,28 @@
 <template>
-  <s-search-field v-bind="$attrs">
+  <s-search-field
+    v-bind="polarisAttrs"
+    :value="modelValue"
+    @blur="emit('blur', $event)"
+    @change="emit('change', $event)"
+    @focus="emit('focus', $event)"
+    @input="
+  (evt) => {
+    emit('input', evt);
+    value = evt.currentTarget?.value || '';
+  }
+"
+  >
     <slot />
   </s-search-field>
 </template>
 
 <script setup>
+import { computed } from "vue";
+import { usePolarisAttrs } from "./utils";
 defineOptions({ name: "ShSearchField", inheritAttrs: false });
-defineProps({
+const props = defineProps({
   maxLength: { type: Number, required: false },
   minLength: { type: Number, required: false },
-  value: { type: String, required: false },
   autocomplete: { type: String, required: false },
   defaultValue: { type: String, required: false },
   details: { type: String, required: false },
@@ -21,6 +34,13 @@ defineProps({
   required: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false },
   id: { type: String, required: false },
-  name: { type: String, required: false }
+  name: { type: String, required: false },
+  modelValue: { type: String, required: false }
 });
+const emit = defineEmits(["update:modelValue", "blur", "change", "focus", "input"]);
+const value = computed({
+  get: () => props.modelValue,
+  set: (v) => emit("update:modelValue", v)
+});
+const polarisAttrs = usePolarisAttrs(props, ["modelValue"]);
 </script>