@ownego/polaris-vue assumes a Vue app is the only content on the page.

But a Vue 3 app (which uses @ownego/polaris-vue) can be injected into a webpage (e.g., Chrome Browser extension, js lib). CSS stylings for the parent can contaminate the app, and stylings for the app can contaminate the parent. A ShadowDOM prevents this contamination by isolating the app. However, wrapping the app into the ShadowDOM rises the following exception when the app uses @ownego/polaris-vue components that use Teleport (e.g, modal, split button, popover, etc.)

[Vue warn]: Failed to locate Teleport target with selector "#PolarisPortalsContainer". Note the target element must exist before the component is mounted - i.e. the target cannot be rendered by the component itself, and ideally should be outside of the entire Vue component tree. at <Anonymous key=0 idPrefix="popover" >

[Vue warn]: Invalid Teleport target on mount: null (object) at <Anonymous key=0 idPrefix="popover" >

[Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/core at <Anonymous key=0 idPrefix="popover" >

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'emitsOptions') at shouldUpdateComponent (chunk-IC65DETL.js:2084:27) at updateComponent (chunk-IC65DETL.js:5551:9) at processComponent (chunk-IC65DETL.js:5511:7) at patch (chunk-IC65DETL.js:5226:11) at patchBlockChildren (chunk-IC65DETL.js:5447:7) at processFragment (chunk-IC65DETL.js:5491:9) at patch (chunk-IC65DETL.js:5220:9) at patchBlockChildren (chunk-IC65DETL.js:5447:7) at Object.process (chunk-IC65DETL.js:6244:9) at patch (chunk-IC65DETL.js:5228:16)

The solution

In a codebase where #PolarisPortalsContainer is queried (Portal.vue and PopoverOverlay.vue) run .querySelector('#PolarisPortalsContainer') against the ShadowRoot (instead of the document) if the app is wrapped in a ShadowDOM (as a new option for app.use(PolarisVue))

Hello

I tried to migrate from v1.3.5 to v1.3.7 and I receive this message:

The engine "node" is incompatible with this module. Expected version "^14.17.0 || ^16.13.0". Got "20.0.0"
error Found incompatible module.

I also see that the loading state is not working on the ContextualSaveBar button but that can be part of another issue if you want

PS: after downgrading Node to v16 the update was OK. I don't know why it was working on V1.3.5

Build Choice List Component

I'm seeing a strange error when using the RangeSlider. I set up a minimal test in the repo itself and it still happens. I was not able to debug so bringing it up here.

Error

Test Template

<template>
  <RangeSlider
    label="Test"
    v-model="val"
  />
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import { RangeSlider } from '../components/RangeSlider';
  
  const val = ref(0)
</script>

I use the DatePicker in the template section, like:

<DatePicker
  :disableDatesBefore="disableDateBefore()"
  :disableSpecificDates="disabledDates"
  :month="pickerView.month"
  :year="pickerView.year"
  weekStartsOn="1"
  @change="handleDateChange"
  @month-change="handleMonthChange"
  v-if="displayDatePicker"
/>

and I setup the disabledDates array to exclude saturdays and sundays:

<script setup>
import dayjs from 'dayjs'
const disabledDates = [ ...Array(60).keys() ].map(i => dayjs().add(i, 'day')).filter(i => [0,6].includes(i.day())).map(i => i.toDate());
....
</script>

unfortunately the rendered date picker still displays saturdays and sundays as active and clickable.

Below the dependency with the lib:

"@ownego/polaris-vue": {
    "version": "1.3.9",
    "resolved": "https://registry.npmjs.org/@ownego/polaris-vue/-/polaris-vue-1.3.9.tgz",
    "integrity": "sha512-vqRU1NI24L586ChjCmLsWLREtu0hz11lZCC7nTvVl4DqdyhOFIyxgUcRigR/BHICAlS8Z0YFVfagrlWJ2rJx+w==",
    "requires": {
      "@shopify/polaris-icons": "^6.5.0",
      "vite-svg-loader": "^3.1.2",
      "vue": "^3.2.31",
      "vue-router": "^4.1.6"
    }
  }

I'm trying to use ResourceItem inside a ResourceList with a @click event but it's not triggering anything

The code

<ResourceList
    :resourceName="{singular: 'Email', plural: 'Emails'}"
    :show-header="false"
    :selectable="false"
>
    <ResourceItem
        v-for="mail in mails"
        :key="mail.uuid"
        :id="mail.uuid"
        @click="selectEmail"
    >
        <h3>
            <TextStyle variation="strong">{{ mail.subject }}</TextStyle>
        </h3>
        <div>{{ mail.body }}</div>
    </ResourceItem>
</ResourceList>

methods: {
        selectEmail(test) {
            console.log(test);
        }
    }

(yes I use vue3 and I tried both Composition / Options API and it's the same result)

I get nothing when I click on an item in the list

Thanks for your help !

Build InlineError Component

Build Icon Component.
Reference component: VisuallyHidden Component
Branch: component/icon

Add the guide to creating Demo file to the doc.
Refer by #143

Build Radio Button Component

I've been exploring the ownego/polaris-vue library and I've noticed that the current documentation can be improved to make it more developer-friendly, especially for newcomers.

1. Enhanced "Get Started" Page: The "Get Started" page should provide more detailed, step-by-step instructions on how to set up and start using ownego/polaris-vue. This can include:

• Clear installation instructions.
• A simple example to demonstrate the core concepts.

2. Import Statements in Code Sections: It would be extremely helpful to include import statements in the code sections of each component in the documentation. This makes it easier for developers to understand how to include and use the components in their own code.

These improvements would go a long way in making it more convenient for developers, especially those who are new to the library, to get started and use ownego/polaris-vue effectively.

Subcomponents like StackItem, ExceptionListItem, ... are missing in the volar.d.ts

Build Link Component

Hi Guys , Is Toast working for you ? I have a toast inside a frame ,, but it's not rendering .
Gives error - hideToast is not a function.
Any help ?

The OptionList component is giving a ReferenceError: value is not defined error when allow-multiple is enabled.

https://github.com/Shopify/polaris-react/tree/main/src/components/Labelled

Hello @ownego

Thank you for such amazing work, beyond words and I hope I can contribute with you soon!
I've been tinkering with the implementation, but I'm facing what I believe might be something silly, but it's definitely defeating me 😭

I'm using Vite and have followed your steps to implement icons, without any other alterations, but when I import an icon I see this Missing "./dist/svg/HomeMinor.svg" export in "@shopify/polaris-icons" package

And my code is as follows (Using composition API)

<template>
    <AppProvider>
        <Frame>
            <template #navigation>
                <Navigation location="/">
                    <NavigationSection
                        :items="navItems"
                        :rollup="{ after: 2, view: 'view', hide: 'hide', activePath: '/' }"
                    />
                </Navigation>
            </template>
            <slot/>
        </Frame>
    </AppProvider>
</template>

<script setup>
import HomeMinor from '@shopify/polaris-icons/dist/svg/HomeMinor.svg';
import OrdersMinor from '@shopify/polaris-icons/dist/svg/OrdersMinor.svg';
import ProductsMinor from '@shopify/polaris-icons/dist/svg/ProductsMinor.svg';
import MarketingMinor from '@shopify/polaris-icons/dist/svg/MarketingMinor.svg';

const navItems = [
    { url: '#', label: 'Home', icon: HomeMinor },
    { url: '#', label: 'Orders', icon: OrdersMinor },
    { url: '#', label: 'Products', icon: ProductsMinor, selected: true,
        subNavigationItems: [
            { url: '#', new: true, label: 'New item' },
            { url: '#', label: 'Active Item', selected: true},
            { url: '#', disabled: true, label: 'New item' },
        ],
    },
    { url: '#', label: 'Marketing', icon: MarketingMinor, badge: { content: 'Warn', status: 'warning' }},
];
</script>

vite.config.js

import { defineConfig } from "vite";
import laravel from "laravel-vite-plugin";
import vue from "@vitejs/plugin-vue";
import svgLoader from 'vite-svg-loader';

export default defineConfig({
    server: {
        https: false,
        host: "0.0.0.0",
        hmr: {
            host: "0.0.0.0",
        },
    },
    resolve: {
        dedupe: ['vue'],
        alias: {
            '@js': '/resources/js',
        },
    },
    plugins: [
        laravel({
            refresh: true,
            input: "resources/js/app.js",
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
        svgLoader()
    ],
});

I've only followed the very basic steps so far but haven't been able to figure out what's really happening

I hope you can guide me a bit!

Appreciate all your help

Best
Mauro

I am trying to integrate this plugin with Nuxt 3 and I am getting the following error. I have created a basic repo to reproduce the error at https://stackblitz.com/edit/nuxt-starter-bbhctu

[nuxt] [request error] [unhandled] [500] __vite_ssr_import_2__.createMemoryHistory is not a function                                                                                             09:39:06
  at ./node_modules/nuxt/dist/pages/runtime/plugins/router.mjs:38:256  
  at fn (./node_modules/nuxt/dist/app/nuxt.mjs:151:27)  
  at Object.callAsync (./node_modules/unctx/dist/index.mjs:49:19)  
  at callWithNuxt (./node_modules/nuxt/dist/app/nuxt.mjs:153:23)  
  at applyPlugin (./node_modules/nuxt/dist/app/nuxt.mjs:97:29)  
  at Module.applyPlugins (./node_modules/nuxt/dist/app/nuxt.mjs:107:11)  
  at process.processTicksAndRejections (node:internal/process/task_queues:95:5)  
  at async createNuxtAppServer (./node_modules/nuxt/dist/app/entry.mjs:29:7)  
  at async default (./node_modules/@nuxt/vite-builder/dist/runtime/vite-node.mjs:27:18)  
  at async Object.renderToString (./node_modules/vue-bundle-renderer/dist/runtime.mjs:172:19)

Any idea how to resolve this error?

I am trying to reduce the bundle size for my app , also , i would like to know , how can we do it ?

Because , at the moment , if i try to import only the components i want , it fails with error - content is null.

As the documentation state, i used import '@ownego/polaris-vue/dist/styles.css' to import the CSS into my main.js file, but it results in this compilation error:

Failed to resolve import "@ownego/polaris-vue/dist/styles.css"

The Frame docs have a screenshot with a full-screen app.
For me, app using Frame still shows the Shopify sidebar. Is it actually possible to hide Shopify sidebar and leave more screen for the app?

Found the same question here:
https://community.shopify.com/c/shopify-apis-and-sdks/hiding-shopify-ui-elements-in-an-embedded-app/td-p/1250926

Thanks

Shopify/polaris@@shopify/[email protected]...@shopify/[email protected]

Are there any plans to migrate the ResourceList Component?
Are you open to contributions?

I am trying to use the Loading component at https://ownego.github.io/polaris-vue/?path=/docs/components-loading--loading. I am not sure if I am using it correctly, can you help me with this please

This is my layout file code

<template>
  <AppProvider>
    <Loading v-if="isActive" />
    <slot></slot>
  </AppProvider>
</template>

This is the error I am getting

polaris-vue.es.js?v=ea344ad5:18363 Uncaught (in promise) TypeError: startLoading is not a function
    at polaris-vue.es.js?v=ea344ad5:18363:7
    at runtime-core.esm-bundler.js:2757:40
    at callWithErrorHandling (runtime-core.esm-bundler.js:173:22)
    at callWithAsyncErrorHandling (runtime-core.esm-bundler.js:182:21)
    at hook.__weh.hook.__weh (runtime-core.esm-bundler.js:2731:29)
    at flushPostFlushCbs (runtime-core.esm-bundler.js:359:46)
    at flushJobs (runtime-core.esm-bundler.js:413:9)

I've forked the project and am trying to run yarn dev but getting the following error:

7:30:04 PM [vite] Internal server error: Failed to resolve import "./Demo.vue" from "src/main.ts". Does the file exist?
  Plugin: vite:import-analysis
  File: /Users/tarwin/all/development/repos/polaris-vue/src/main.ts
  1  |  import { createApp } from "vue";
  2  |  import Demo from "./Demo.vue";
     |                    ^
  3  |  import PolarisVue from "./polaris-vue";
  4  |  createApp(Demo).use(PolarisVue).mount("#app");

There doesn't seem to be a Demo.vue anywhere in the repo. Am I missing something?

Hi Team,

This library has been really helpful, and I would like to start using it more with our projects.

I am concerned with the future of this library. I would like to understand if you are migrating React code to Vue or creating components using the default Shopify Polaris CSS

I would also would love to understand how frequently do you plan to update this library with newer components or are open to PRs from the community for the same,

Thanks,

Build Choice Component

The when setting selectable to "false" on ResourceList it still shows checkboxes next to each ResourceItem.

This is great, really nice to see, I came across it today during my lunch when just looking around to see if anyone has ported these. My following question is:

Do you have a NuxtJS/Vue3 boilerplate which you use this with for Shopify development?

I was thinking of cobbling one together but though I would ask first.

Thanks

Build Visually Hidden Component

Whenever i use IndexTable , i get this error in the console :-

Uncaught TypeError: T.value.getBoundingClientRect is not a function

When "download" attribute is not needed, it should not render a download attribute. Otherwise browser is downloading a "false.htm" instead of navigating to the url.

Interestingly I doesn't happen in top frame, but inside iframe browser download it instead of navigating.

Build Tag Component

Hi, thank you for making this project. There is a problem with button in primaryAction (as far as I tried). When it is disabled by initial and then transition to enabled state, clicking on it does not do anything. Could you investigate and it?

Build Checkbox Component

This is my code

<Card
    :title="mail.subject"
    :primaryFooterAction="{ content: 'Send Reply' }"
    :secondaryFooterActions="[
        { content: 'Move To Pending' },
        { content: 'Mark as refunded' },
        { content: 'Close', destructive: true },
    ]"
>
    <CardSection>
        <p>
            {{ mail.body }}
        </p>
    </CardSection>

    <CardSection>
        <TextField
            v-model="formData.reply"
            autoComplete="off"
            label="Reply Message.."
            :multiline="4"
        />
    </CardSection>
</Card>

This is the result when I click on the "More" dropdown :

It's like the menu has an absolute position but with no relative parent and thus it goes on the top left of the screen.

When I click a second time, the menu disappear (ok) and then when I click a 3rd time, nothing happens. I have to refresh the page to make it show again.

Thanks a lot :)

I'm using "@ownego/polaris-vue": "^1.3.6", btw

Should do waterfall from complicated components down to simple ones

Hello there,

We've just started using this package and we've noted that the AnnotatedSection.vue file is missing from the NPM package on version 1.3.10.
And it seems the component is missing since v1.3.0 (but present on v1.2.0)

You can confirm this navigating the code published here: https://www.npmjs.com/package/@ownego/polaris-vue

Would you guys be able to add it back to the package?

Thank you in advance, keep up the good work!

Build Checkbox Component

Hi, thanks for this library!

I'm trying to render some content in a Frame.
I see some components use <script setup>, but not this one:
https://ownego.github.io/polaris-vue/?path=/docs/components-frame--frame

Would it be possible to update it to use <script setup> too?

Thanks!

PS: Is there a hello world full app example?

https://polaris.shopify.com/components/forms/select#navigation

https://github.com/Shopify/polaris-react/tree/main/src/components/Label

The FormField Item only generate 1 item on v-for because of Symbol(Fragment) type.

Need to check FormLayout/components/Group line ~18th, similar with Stack component loop