Skip to content

Commit 51520f9

Browse files
juzserjuzser
authored
Merge pull request #60 from qikify/dev
Update documentations
2 parents e2dee1a + 9333e30 commit 51520f9

File tree

4 files changed

+211
-11
lines changed

4 files changed

+211
-11
lines changed

‎.storybook/stories/GetStarted.stories.mdx‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,78 @@ new Vue({
8181
});
8282
```
8383

84+
### **Styles**
85+
86+
Polaris Vue supports both **CSS** & **SCSS**, you can find the neccessary styles files in `node_modules/@qikify/polaris-vue/dist/`.
87+
88+
#### **SCSS**
89+
90+
To use scss, you can import the `main.scss` file in your `.vue` or `.scss` file.
91+
92+
Or you can import separated scss files from dist to your project scss file.
93+
94+
Example:
95+
96+
```javascript
97+
<style lang="scss">
98+
@import '@qikify/polaris-vue/dist/scss/main.scss';
99+
</style>
100+
```
101+
102+
#### **CSS**
103+
104+
Similar with SCSS, you can import the `main.css` file in your `.vue` file. Or use it as standalone css file.
105+
106+
```javascript
107+
<style>
108+
@import '@qikify/polaris-vue/dist/css/main.css';
109+
</style>
110+
```
111+
112+
<br/>
113+
114+
## Aliasing Vue import
115+
116+
`PolarisVue` and `PortalVue` require access to the global Vue reference (via `import Vue from 'vue'`).
117+
118+
<font color="#0c5460">If you are using a specific build of Vue (i.e. runtime-only vs. compiler + runtime), you will need to set up an alias to `vue` in your bundler config to ensure that your project, **PolarisVue** and **PortalVue** are all using the same build version of Vue. If you are seeing an error such as <font color="red">"$attr and $listeners is readonly"</font>, or <font color="red">"Multiple instances of Vue detected"</font>, then you will need to set up an alias.</font>
119+
120+
<br/>
121+
122+
Example: Vue alias for `Vue CLI` in `vue.config.js`
123+
124+
```js
125+
module.exports = {
126+
// ...
127+
resolve: {
128+
alias: {
129+
// If using the runtime only build
130+
vue$: 'vue/dist/vue.runtime.esm.js' // 'vue/dist/vue.runtime.common.js' for webpack 1
131+
// Or if using full build of Vue (runtime + compiler)
132+
// vue$: 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1
133+
}
134+
}
135+
}
136+
```
137+
138+
Example: Vue alias in `webpack.config.js`
139+
140+
```js
141+
const path = require('path')
142+
143+
module.exports = {
144+
chainWebpack: config => {
145+
config.resolve.alias.set(
146+
'vue$',
147+
// If using the runtime only build
148+
path.resolve(__dirname, 'node_modules/vue/dist/vue.runtime.esm.js')
149+
// Or if using full build of Vue (runtime + compiler)
150+
// path.resolve(__dirname, 'node_modules/vue/dist/vue.esm.js')
151+
)
152+
}
153+
}
154+
```
155+
84156
<br/>
85157

86158
## Contributing

‎.storybook/stories/PolarisIcons.stories.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ So you don't have to install any additional packages.
2828

2929
You have to use `vue-svg-loader` in your project. There are 2 ways to do as below.
3030

31-
See [Icon Component](#icon-component) for more details.
31+
See [Icon Component](?path=/docs/components-images-and-icons-icon--icon) for more details.
3232

3333
<br/>
3434

‎README.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,10 @@ We're trying to make it mostly close with Shopify style guide and get a better p
55

66
#### Progress: 30% (We're working very hard to make it 99%)
77

8+
**Package size:** ~55KB (all components).
9+
10+
**Follow Polaris React version:** [7.6.0](https://github.com/Shopify/polaris-react/releases/tag/v7.6.0) - Release date: *19/01/2022*.
11+
812
### Documentation
913

1014
Online documentation: [Click Here](https://qikify.github.io/polaris-vue/)

‎src/components/Button/README.stories.mdx‎

Lines changed: 134 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -40,18 +40,11 @@ import { Button } from '@/polaris-vue';
4040
},
4141
},
4242
},
43-
default: {
44-
table: {
45-
disable: 'true',
46-
}
47-
},
4843
icon: {
4944
name: 'icon',
50-
options: [
51-
'placeholder',
52-
],
5345
control: {
5446
type: 'select',
47+
options: ['placeholder'],
5548
labels: {
5649
null: 'default',
5750
},
@@ -62,6 +55,121 @@ import { Button } from '@/polaris-vue';
6255
},
6356
},
6457
},
58+
blur: {
59+
name: 'blur',
60+
description: 'Callback when focus leaves button',
61+
control: { disable: true },
62+
table: {
63+
category: 'Events',
64+
type: {
65+
summary: '"() => void"',
66+
},
67+
},
68+
},
69+
click: {
70+
name: 'click',
71+
description: 'Callback when clicked',
72+
control: { disable: true },
73+
table: {
74+
category: 'Events',
75+
type: {
76+
summary: '"() => void"',
77+
},
78+
},
79+
},
80+
focus: {
81+
name: 'focus',
82+
description: 'Callback when button becomes focussed',
83+
control: { disable: true },
84+
table: {
85+
category: 'Events',
86+
type: {
87+
summary: '"() => void"',
88+
},
89+
},
90+
},
91+
keydown: {
92+
name: 'keydown',
93+
description: 'Callback when a keydown event is registered on the button',
94+
control: { disable: true },
95+
table: {
96+
category: 'Events',
97+
type: {
98+
summary: '"(event: KeyboardEvent) => void"',
99+
},
100+
},
101+
},
102+
keypress: {
103+
name: 'keypress',
104+
description: 'Callback when a keypress event is registered on the button',
105+
control: { disable: true },
106+
table: {
107+
category: 'Events',
108+
type: {
109+
summary: '"(event: KeyboardEvent) => void"',
110+
},
111+
},
112+
},
113+
keyup: {
114+
name: 'keyup',
115+
description: 'Callback when a keyup event is registered on the button',
116+
control: { disable: true },
117+
table: {
118+
category: 'Events',
119+
type: {
120+
summary: '"(event: KeyboardEvent) => void"',
121+
},
122+
},
123+
},
124+
mouseover: {
125+
name: 'mouseover',
126+
description: 'Callback when mouse enter',
127+
control: { disable: true },
128+
table: {
129+
category: 'Events',
130+
type: {
131+
summary: '"() => void"',
132+
},
133+
},
134+
},
135+
touchstart: {
136+
name: 'touchstart',
137+
description: 'Callback when element is touched',
138+
control: { disable: true },
139+
table: {
140+
category: 'Events',
141+
type: {
142+
summary: '"() => void"',
143+
},
144+
},
145+
},
146+
prefix: {
147+
name: 'prefix-${prefixId}',
148+
description: 'Slot to custom prefix for each item of actions on connectedDisclosure by `prefixId`',
149+
control: { disable: true },
150+
table: {
151+
category: 'Slots',
152+
type: {
153+
summary: null,
154+
},
155+
},
156+
},
157+
suffix: {
158+
name: 'suffix-${suffixId}',
159+
description: 'Slot to custom suffix for each item of actions on connectedDisclosure by `suffixId`',
160+
control: { disable: true },
161+
table: {
162+
category: 'Slots',
163+
type: {
164+
summary: null,
165+
},
166+
},
167+
},
168+
default: {
169+
table: {
170+
disable: 'true',
171+
}
172+
},
65173
}}
66174
/>
67175

@@ -219,8 +327,22 @@ SplitButton.parameters = {
219327
transformSource: (source) => {
220328
const tmpSource = source
221329
.replace(/<template>/, '')
222-
.replace(/<\/template>/, '');
223-
return tmpSource;
330+
.replace(/<\/template>/, '')
331+
.replace( /(?<=:connectedDisclosure=).+/, '"connectedDisclosure"');
332+
const fullSource = dedent`
333+
data() {
334+
return {
335+
connectedDisclosure: {
336+
accessibilityLabel: 'Other save actions',
337+
actions: [
338+
{ content: 'Save as draft' },
339+
],
340+
},
341+
};
342+
},
343+
${tmpSource}
344+
`;
345+
return fullSource;
224346
},
225347
},
226348
}
@@ -231,6 +353,8 @@ Buttons are used primarily for actions, such as “Add”, “Close”, “Cance
231353

232354
For navigational actions that appear within or directly following a sentence, use the [link component.](/docs/components-navigation-link--link)
233355

356+
For connectedDisclosure actions, use the [ActionList component.](/docs/components-actions-actionlist--actionlist)
357+
234358
<font color="#FF7900">Use component with camel case for prevent conflict with <b>button</b> element in html.</font>
235359
<br/><br/>
236360

0 commit comments

Comments
 (0)