praella-agency / polaris-vue

Polaris Vue by HulkApps is a component library for Vue.js based on Shopify Polaris style guide.

This package and repository are no longer supported.

Please find other alternative packages for Polaris vue3 - https://www.npmjs.com/package/@mumble/vue3-polaris and https://ownego.github.io/polaris-vue/?path=/story/get-started--page

Polaris Vue

Polaris Vue by HulkApps is a component library for Vue.js based on Shopify Polaris style guide.

Documentation

You could browse online documentation here.

Quick start

You need Vue.js version 2+.

1. Install via npm

Using NPM

npm i @hulkapps/polaris-vue

Using Yarn

yarn add @hulkapps/polaris-vue

2. Import and use Polaris Vue

import Vue from 'vue';
import PolarisVue from '@hulkapps/polaris-vue';
import '@hulkapps/polaris-vue/dist/polaris-vue.min.css';
Vue.use(PolarisVue);

Other available builds

'/dist/polaris-vue.min.js';
'/dist/polaris-vue.ssr.js';
'/dist/polaris-vue.esm.js';

Contributing

If you notice any bugs, please create issue tickets. Also, pull requests are welcome.

License

Code released under MIT license.

polaris-vue's Issues

[QUESTION] Connecting PDatatable to Laravel?

Hi there,

We've started using this package in our Laravel applications and were wondering if you guys have any thoughts of how should we go connecting PDataTable to the backend inclusive of paginations and other queries?

Help is much appreciated!

Thanks
Ali

Vue 3 Support

Is your feature request related to a problem? Please describe.
Vue 3 is now the default (sind 7rd Feb 2022), therefore using this Component Library with the default version of vue is no longer possible.

Describe the solution you'd like
Update the components to be supported in Vue 3, fix breaking changes. (e.g. v-model value -> modelValue; input -> update)

Describe alternatives you've considered
Using Vue 2.x isn't a viable solution for most new projects.

Additional context
I'm aware of #49, but last official update on that was summer 2021.

If this is something you aren't going to approach in the near future, could you say so, to open the door for a fork of some kind?

What's the correct way to use these form fields? `v-model` seems to have mixed support

As the title suggests I'm struggling to use this package to create a working form. The form itself displays as expected, but any use of v-model on anything other than a textfield (so a select, for instance) doesn't work.

Expected behaviour

Add v-model to any form element (PSelect, for example) and it will be accessible within the component.

Actual behaviour

Adding v-model to a PSelect does nothing. The data isn't available in the component.

Example code

<template>
    <PFormLayout>
        <PHeading>Products</PHeading>
        
        <PTextField
            label="How many products?"
            type="number"
            helpText="This is the number of products we'll generate. There's a maximum of 100 at a time."
            value="20"
            v-model="form.num"
        />

        <PSelect
            label="Variations?"
            :options="['No', 'Yes', 'Mixed']"
            v-model="form.has_variations"
        />

        <PButton :primary="true" :loading="isBusy" @click="run()">Go</PButton>
    </PFormLayout>
</template>

<script>
    export default {

        data() {
            return {
                form: {
                    num: 20,
                    has_variations: '',
                },
                isBusy: false,
                hasError: false,
                errors: '',
            }
        },

        methods: {
            // Generate the products
            run() {
                this.isBusy = true;
                console.log(this.form);
            },
        }
    }
</script>

In this example I'd expect this.form to contain the contents of the form, eg the number entered into the form.num field and the item selected. I can access the textfield value, but I can't access the PSelect.

I imagine pretty much everyone uses forms who uses this package so I imagine I'm approaching this the wrong way. Am I expected to perhaps name or ID each field and then look up the value on a more manual basis?

polaris-vue‘s events had no effect

Hello, I recently tried to use polaris-vue, found that the element binding event did not take effect, the console reported errors, please troubleshoot the cause and solve it as soon as possible, thank you

Scss variables

There is any way to change sass variables without copy and paste from node_modules? Another doubt, can we follow the Shopify colors principles to make changes in styles?

Multi Select valueField

It says that for "Multi Select" component field "valueField" is this:
Field name in the options array that should be used for the value

Despite this property being set, the value that is being returned, is full item object.
I.e. in case of these options:
[{label:'Label1',value:'value1'},{label:'Label2',value:'value2'}]
When an item is selected it returns {label:'Label1',value:'value1'} instead if 'value1"

Am I missing something or is this as intended?

I would expect it to work similar to single Select component which returns value only.

Thanks!

Typescript typings?

Does this package export Typescript typings? I've tried "npm i @types/hulkapps__polaris-vue" with no luck. I'm a bit new to Typescript so sorry if there's an obvious answer.

How to integrate in nuxtjs' SSR?

Describe the bug
How to integrate in nuxtjs' SSR?

To Reproduce
Steps to reproduce the behavior:

1. next.config.js file, I wrote as follows:
   plugins: [
   {
   src: "@/plugins/polaris-vue/ssr.js",
   mode: 'server'
   }
   ]

Screenshots

tree-shaking

Does this package support tree-shaking?

Storybook not working

I just noticed that when I was trying to open the Storybook link it just keeps on loading. I get the following error in the console.

Uncaught TypeError: Cannot read property 'a' of undefined

Some components don't render well

Describe the bug
When I use component PTopBar in demo project, but that component seems not render well.

Demo Code

<template>
  <PFrame>
    <PTopBar
      slot="topBar"
      showNavigationToggle
      :logo='{"width":124,"topBarSource":"https://cdn.shopify.com/s/files/1/1564/7647/files/hulk-apps-darken_c0448e92-587f-47a8-9473-5ea0023b5ffd.svg?v=1583731462","url":"javascript:void(0)","accessibilityLabel":"Hulkapps"}'
      :userMenu='{"id":"Polaris-UserMenu","actions":[{"items":[{"content":"Back to Shopify","icon":"ArrowLeftMinor"}]},{"items":[{"content":"Community forums"}]}],"name":"Dharma","detail":"Hulkapps","initials":"D","open":false,"message":{"title":"Shopify Production","description":"New message","action":{"content":"Action"},"link":{"to":"javascript:void(0);","content":"Link","external":true},"badge":{"content":"Badge","status":"warning"}}}'
      :secondaryMenu='{"id":"Polaris-Menu","open":false,"actions":[{"items":[{"content":"Community forums"}]}],"icon":"QuestionMarkMajor"}'
      :searchField='{"value":"","placeholder":"Search","showFocusBorder":true}'
      :searchResult='{"items":[{"content":"Shopify help center"},{"content":"Community forums"}]}'
    />
  </PFrame>
</template>

Screenshots

The Polaris-vue can't work!

Hello, Our team found a major error in using your project.
This is my code to quote your project:
----main.js----
import Vue from 'vue';
import '@hulkapps/polaris-vue/dist/polaris-vue.min.js';
import '@hulkapps/polaris-vue/dist/polaris-vue.ssr.js';
import '@hulkapps/polaris-vue/dist/polaris-vue.esm.js';
import PolarisVue from '@hulkapps/polaris-vue';
import '@hulkapps/polaris-vue/dist/polaris-vue.min.css';
Vue.use(PolarisVue);

But there was a error when we used it, the error message in console is "Uncaught ReferenceError: Cannot access 'vue_component$t' before initialization".
This error only occurs when we reference the code "import '@hulkapps/polaris-vue/dist/polaris-vue.esm.js';"
We guess maybe this file have somthing wrong.
Please solve it as soon as possible!!!

[Bug] PSelect components,"options" props `disabled` configure is not working

Too bad, I hope you can check the options other default configuration items of this component

My relevant environment configuration version:
Vue.js: ^2.6.11
Yarn: 1.22.11
Node.js: v16.0.0

---

<PSelect
  label="Sort by"
  :options='[{"label":"Newest update","value":"newestUpdate"},{"label":"Oldest update","value":"oldestUpdate"},{"label":"Most spent","value":"mostSpent"},{"label":"Most orders","value":"mostOrders","disabled":true},{"label":"Last name A–Z","value":"lastNameAlpha","hidden":true},{"label":"Last name Z–A","value":"lastNameReverseAlpha"}]'
  :value="null"
  placeholder="Select"
/>

options:

[
    {
        "label":"Newest update",
        "value":"newestUpdate"
    },
    {
        "label":"Oldest update",
        "value":"oldestUpdate"
    },
    {
        "label":"Most spent",
        "value":"mostSpent"
    },
    {
        "label":"Most orders",
        "value":"mostOrders",
        "disabled":true// This configuration does not work
    },
    {
        "label":"Last name A–Z",
        "value":"lastNameAlpha",
        "hidden":true
    },
    {
        "label":"Last name Z–A",
        "value":"lastNameReverseAlpha"
    }
]

[Suggesstion] I hope `Cleave.js` is integrated into `Text Field` component

Cleave.js has a simple purpose: to help you format input text content automatically.

GitHub repositories link: https://github.com/nosir/cleave.js
Use in VueJs

I hope Cleave.js is integrated into Text Field component, or Text Field component provide extension methods

Thanks :)

How to optimize the packaging volume?

After packaging, the volume is too large, is there any way to optimize it?

The version i use: "@hulkapps/polaris-vue": "^2.3.7"
This is report: https://cdn.nowtime.cc/2021/08/25/938909357.html

file vue.config.js:

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  productionSourceMap: false,
  devServer: {
    disableHostCheck: true,
  },
  publicPath: process.env.VUE_APP_BASE_URL,
  assetsDir: './assets',
  indexPath: 'index.html',

  configureWebpack: config => {
    let plugins = [
      new UglifyJsPlugin({
        uglifyOptions: {
          compress: {
            warnings: false,
            drop_console: true,
            drop_debugger: true
          },
          output: {
            comments: true
          }
        },
        sourceMap: false,
        parallel: true
      })
    ];

    if (process.env.VUE_APP_build_type === "production") {
      config.plugins = [...config.plugins, ...plugins];
    }
  },
}

PTextField: Request support for `autocomplete` properties

Because I want to use these value :
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete

Bundle size?

Describe the bug
My webpack bundle before adding this library is ~500k, and after adding it it's about 3mb. I'm certain I'm not using every single part of the library, but I haven't been able to figure out the proper webpack incantation that leaves the parts I'm not using out of the compiled bundle.

My application.js just imports the library like this:

import PolarisVue from '@hulkapps/polaris-vue';
import '@hulkapps/polaris-vue/dist/polaris-vue.min.css';
Vue.use(PolarisVue);

Is there a way to have webpack automagically leave out the parts of polaris-vue that my app does not use? I've thrashed around with babel.config.js but not made any progress.

[Suggestion] Modal component, hope to click "Primary Button" to display the loading effect

Hope to click "Primary Button" to display the loading effect

Like this

PButton component, when the "primary" and "loading" configurations are set at the same time, the displayed style is inappropriate

Current version

"@hulkapps/polaris-vue": "^2.3.3"

PButton component, when the "primary" and "loading" configurations are set at the same time, the displayed style is inappropriate

1. set "primary"
   

2. set "primary" and "loading"

Background-color is inappropriate

Desired effect

Like this, translucent colors based on dominant colors:

.Polaris-Button--primary.Polaris-Button--loading {
  background-color: rgba(0, 123, 92, 0.5);
}

Component PLink -> [Vue warn]: Invalid prop: type check failed for prop "to". Expected String, got Object

Use the following wording Vue.js to report warnings!

Login.vue:

<PLink :to="{name: 'user_login'}">Return to log in</PLink>

router/index.js：

// ....

export const routes = [
  {
    path: '/login',
    name: 'user_login',
    component: () => import(`/src/views/User/Login`),
  }
]

// ....

The actual use of the passed Object parameter is valid, and you can jump to the path /login. Why restrict the use of the Object type?

---

My English is not good, the description may be inaccurate, please forgive me 😊

Hide popover when route changes

When i navigate to a different route with popover open, the popover option list does not closes and stays there in the page. I tried to change the activator value to false on beforeDestroy(), which didn't work.

Color Picker needs more feature

Please add a props to control the color picker's display

Drop Zone do not show

How to use Drop Zone?

use uploadedFiles

<PDropZone type="image" :files="[]" :handleOnDrop="onDrop" uploadedFiles>

Do not display uploaded files

Datatable not working fine

Hi there,

Bug 1

I was just using the following PDataTable component in the system.

https://polaris-vue.hulkapps.com/?path=/docs/lists-tables-data-table--data-table

There seems a bug inside here where if you click the Filter Options at the top right, it will put the dropdown in the middle of the screen.

This behaviour can also be observed here:
https://polaris-vue.hulkapps.com/?path=/docs/lists-tables-data-table--data-table

Bug 2

I copy pasted the given code in the above storybook, but I get errors on my end. These are as following

[Vue warn]: Error in render: "TypeError: value.charAt is not a function"
found in
---> <PBadge>
       <PDataTableCell>
         <PDataTable>
           <App> at src/App.vue
             <Root>

vue.runtime.esm.js?2b0e:1897 TypeError: value.charAt is not a function
    at variationName (polaris-vue.common.js?fdc2:6987)
    at VueComponent.get (polaris-vue.common.js?fdc2:7026)

Due to which I can't see status on, refer to the following screenshot:

Will this work with Vue 3?

Or is there any plans for migrating it?

add Index Table's bulkActions' feature

Index Table dont's have a prop to control the bulkActions' checkbox's state.
I hope that after I have done some operations, its state will be restored

[Suggestion] Resource List

How to hide the header of <PPage>？

<PPage> <PCard> <PLayoutSection> <PCardSection> </PCardSection> </PLayoutSection> </PCard> </PPage>

Setting Toggle does not support loading spinner

The Setting Toggle does not have support for displaying loading spinner when action is taking place.

[Bug] PSelect components, if the "valueField" and "textField" parameters are not passed in, an exception will be displayed

This code comes from your document, using this code "PSelect component" can not achieve the expected effect

https://polaris-vue.hulkapps.com/?path=/docs/forms-select--select

<template>
  <div>
    <PSelect
      :disabled="false"
      label="Sort byddd"
      :options='[{"label":"Newest update","value":"newestUpdate"},{"label":"Oldest update","value":"oldestUpdate"},{"label":"Most spent","value":"mostSpent"},{"label":"Most orders","value":"mostOrders","disabled":true},{"label":"Last name A–Z","value":"lastNameAlpha","hidden":true},{"label":"Last name Z–A","value":"lastNameReverseAlpha"}]'
      disabledField=""
      :value="null"
      placeholder="Select"
    />
    <br />
  </div>
</template>

---

I thought it was my environmental problem, until I read the source code：/src/components/PSelect/PSelect.vue#L93

It seems that the default value is not working

When I manually pass in these parameters, it is work:

<template>
  <div>
    <PSelect
      :disabled="false"
      label="Sort byddd"
      :options='[{"label":"Newest update","value":"newestUpdate"},{"label":"Oldest update","value":"oldestUpdate"},{"label":"Most spent","value":"mostSpent"},{"label":"Most orders","value":"mostOrders","disabled":true},{"label":"Last name A–Z","value":"lastNameAlpha","hidden":true},{"label":"Last name Z–A","value":"lastNameReverseAlpha"}]'
      disabledField=""
      value-field="label"
      text-field="value"
      :value="null"
      placeholder="Select"
    />
    <br />
  </div>
</template>

[Bug] PSelect components, props

IndexTable filter option not close after click outside

Describe the bug
Open filter option of the IndexTable, click outside, it does not close.

To Reproduce
Steps to reproduce the behavior:

1. Open a filter option
2. Click outside
3. It still open

Expected behavior
The filter option should automatically close after click outside.

Screenshots
https://prnt.sc/UzdiP71FZ9L1

Desktop (please complete the following information):

• OS: MacOS
• Browser: Chrome
• Version: 103

h.default.directive is not a function

Describe the bug
When using the package with vitejs and building it for production, in the browser console it shows the h.default.directive is not a function error which breaks the whole app.

To Reproduce
Steps to reproduce the behavior:

1. Go to 'https://stackblitz.com/edit/vue2-vite-polaris-uve5gs'
2. Open the browser console to see the error.

Expected behavior
With npm run build command app should be working

Screenshots

Desktop (please complete the following information):

• OS: Linux
• Browser Chrome
• Version 108

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

[Suggestion] Resource List: remove "More Actions" when bulkActions is empty

It would be logical in my opinion to remove the More Actions dropdown if the bulkActions array is empty

<template>
  <PCard>
    <PResourceList
      selectable
      :selected="[]"
      hasMore
      :loading="false"
      :resourceName='{"singular":"Book","plural":"Books"}'
      showHeader
      hideFilters
      :sortOptions='[{"label":"Newest update","value":"DATE_MODIFIED_DESC","disabled":false,"hidden":true},{"label":"Oldest update","value":"DATE_MODIFIED_ASC","disabled":false}]'
      :promotedBulkActions='[{"content":"Edit customers"}]'
      :bulkActions='[]'
      :totalCount="12"
      :appliedFilters='[{"value":"Tagged with Vue","key":"tag_Vue"}]'
    >

Thank you for a great package!

TopBar and Navigation components

There is any prediction about TopBar and Navigation components?

[Suggestion] PDataTable components: Hope to provide event trigger

For example, I want to click on these item to execute my custom method in "Vue.js"

Current provide configure:

{
  "content": "2021073012345",
  "url": "javascript:void(0);"
},

For example, add an "Action" configuration item here to trigger a custom Vue method

{
  "content": "2021073012345",
  //For example, add an "Action" configuration item here to trigger a custom Vue method
  "onAction": this.someHandle
}

Maybe what I said is not very clear, this is the result I probably want

Vue configuration radio button, cannot be selected

<PStackItem v-for="(item, key) in list" :key="key" :id="item.id"> <PRadioButton :id="item.id" :label="item.label" :name="item.name" /> </PStackItem>

============================================
data() {
return {
list: [
{'id':'all','label':'all','helpText':'','name':'accounts'},
{'id':'created_at','label':'created_at','helpText':'','name':'accounts'}
],
}
},

Support for Vue 3

Hello,

This package is compatible with Vue 3 and composition API?