@thinkpixellab-public/px-vue 4.0.22 → 4.0.24

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/.prettierrc.json +10 -0
  2. package/bases/PxBaseItemsSelect.vue +4 -4
  3. package/components/PxDatePicker.vue +1 -1
  4. package/components/PxGsapScrubber.vue +1 -1
  5. package/components/PxRadioButton.vue +1 -1
  6. package/components/PxToggle.vue +1 -1
  7. package/components/PxToggleButton.vue +1 -1
  8. package/components/PxVueTest.vue +11 -11
  9. package/dev/demos/Demo-PxPivot.vue +2 -2
  10. package/dev/demos/Demo-PxSlides.vue +1 -1
  11. package/package.json +34 -34
  12. package/stories/PxTextbox.stories.js +1 -1
  13. package/.prettierrc.js +0 -10
package/.prettierrc.json ADDED
@@ -0,0 +1,10 @@
1
+ {
2
+ "semi": true,
3
+ "arrowParens": "avoid",
4
+ "singleQuote": true,
5
+ "tabWidth": 4,
6
+ "printWidth": 100,
7
+ "bracketSpacing": true,
8
+ "htmlWhitespaceSensitivity": "ignore",
9
+ "endOfLine": "auto"
10
+ }
package/bases/PxBaseItemsSelect.vue CHANGED
@@ -25,7 +25,7 @@ export default {
25
25
 
26
26
  props: {
27
27
  // TEMP-MIGRATION
28
- value: { default: null },
28
+ modelValue: { default: null },
29
29
 
30
30
  /**
31
31
  * Set the selection as either a single item key or an array of item keys.
@@ -116,11 +116,11 @@ export default {
116
116
  },
117
117
 
118
118
  watch: {
119
- // TEMP-MIGRATION
120
- value: {
119
+ // VUE3 MIGRATION, can remove once complete
120
+ modelValue: {
121
121
  immediate: true,
122
122
  handler(nv) {
123
- if (nv != null) {
123
+ if (nv) {
124
124
  const name =
125
125
  'bem' in this ? this.bem() : this.$options?.name || 'UnknownComponent';
126
126
  console.error(
package/components/PxDatePicker.vue CHANGED
@@ -44,7 +44,7 @@
44
44
  <div ref="dialog" :class="bem('dialog')">
45
45
  <px-calendar :class="bem('calendar')" v-model:date="dateValue" />
46
46
  <div :class="bem('clock')" v-if="clock">
47
- <px-clock v-model="dateValue" />
47
+ <px-clock v-model:date="dateValue" />
48
48
  </div>
49
49
  </div>
50
50
  </template>
package/components/PxGsapScrubber.vue CHANGED
@@ -7,7 +7,7 @@
7
7
  <px-icon-button :class="bem('button')" :src="currentButtonIcon" @click="buttonClick" />
8
8
  <px-scrubber
9
9
  :class="bem('scrubber')"
10
- v-model="progress"
10
+ v-model:progress="progress"
11
11
  @seek="seek"
12
12
  @dragstart="dragStart"
13
13
  @dragend="dragEnd"
package/components/PxRadioButton.vue CHANGED
@@ -4,7 +4,7 @@
4
4
  Creates a toggle button (a control with the appearance of a normal button that can be toggle
5
5
  between an on/off state).
6
6
 
7
- <px-radio-button v-model="checked" />
7
+ <px-radio-button v-model:checked="checked" />
8
8
  -->
9
9
 
10
10
  <template>
package/components/PxToggle.vue CHANGED
@@ -4,7 +4,7 @@
4
4
  bem({ checked: checkedValue, reverse: reverse, ...variantsMap }),
5
5
  checkedClass && checkedValue ? checkedClass : null,
6
6
  ]"
7
- aria-role="switch"
7
+ role="switch"
8
8
  :aria-checked="checkedValue"
9
9
  @click="toggleChecked"
10
10
  :type="buttonType"
package/components/PxToggleButton.vue CHANGED
@@ -4,7 +4,7 @@
4
4
  Creates a toggle button (a control with the appearance of a normal button that can be toggle
5
5
  between an on/off state).
6
6
 
7
- <px-toggle :v-model="isChecked" variant="sm" />
7
+ <px-toggle v-model:checked="isChecked" variant="sm" />
8
8
  -->
9
9
 
10
10
  <template>
package/components/PxVueTest.vue CHANGED
@@ -109,7 +109,7 @@
109
109
  }"
110
110
  >
111
111
  <px-dropdown
112
- v-model="validateThree"
112
+ v-model:selected="validateThree"
113
113
  tag="button"
114
114
  trigger="click"
115
115
  :items="fruits"
@@ -214,20 +214,20 @@
214
214
  <px-test test-id="px-date-picker" name="px-date-picker">
215
215
  <px-flex vertical align="center" gap="1">
216
216
  <span>Selected Date: {{ currentDateNull }}</span>
217
- <px-date-picker mode="textbox" v-model="currentDateNull" />
218
- <px-date-picker mode="textbox" clock v-model="currentDateNull" />
219
- <px-date-picker v-model="currentDateNull" />
220
- <px-date-picker time v-model="currentDateNull" />
217
+ <px-date-picker mode="textbox" v-model:date="currentDateNull" />
218
+ <px-date-picker mode="textbox" clock v-model:date="currentDateNull" />
219
+ <px-date-picker v-model:date="currentDateNull" />
220
+ <px-date-picker time v-model:date="currentDateNull" />
221
221
  </px-flex>
222
222
  </px-test>
223
223
 
224
224
  <px-test test-id="px-clock" name="px-clock">
225
- <px-clock v-model="currentDate" />
225
+ <px-clock v-model:date="currentDate" />
226
226
  Selected Date: {{ currentDate }}
227
227
  </px-test>
228
228
 
229
229
  <px-test test-id="px-calendar" name="px-calendar">
230
- <px-calendar v-model="currentDate" />
230
+ <px-calendar v-model:date="currentDate" />
231
231
  Selected Date: {{ currentDate }}
232
232
  </px-test>
233
233
 
@@ -241,10 +241,10 @@
241
241
  items-key-property="id"
242
242
  items-value-property="id"
243
243
  items-label-property="name"
244
- v-model="currentFruitOrFruits"
244
+ v-model:selected="currentFruitOrFruits"
245
245
  ></px-toggle-button-list>
246
246
 
247
- <px-toggle v-model="supportsMultiSelect">Multi-select</px-toggle>
247
+ <px-toggle v-model:checked="supportsMultiSelect">Multi-select</px-toggle>
248
248
  <span>{{ currentFruitOrFruits }}</span>
249
249
  </px-flex>
250
250
  </px-test>
@@ -257,7 +257,7 @@
257
257
 
258
258
  <px-textbox
259
259
  multiline
260
- v-model="currentText"
260
+ v-model:text="currentText"
261
261
  rows="5"
262
262
  placeholder="Say it longer..."
263
263
  />
@@ -270,7 +270,7 @@
270
270
  <px-test test-id="px-dropdown" name="px-dropdown">
271
271
  <px-flex gap="1" align="center" justify="center">
272
272
  <px-dropdown
273
- v-model="currentFruit"
273
+ v-model:selected="currentFruit"
274
274
  tag="button"
275
275
  trigger="click"
276
276
  :items="fruits"
package/dev/demos/Demo-PxPivot.vue CHANGED
@@ -3,8 +3,8 @@
3
3
  -->
4
4
  <template>
5
5
  <div :class="bem()">
6
- <px-pivot :items="tabs" v-model="selectedTab" />
7
- <px-slides :items="tabs" v-model="selectedTab" :drag-enabled="false">
6
+ <px-pivot :items="tabs" v-model:selected="selectedTab" />
7
+ <px-slides :items="tabs" v-model:selected="selectedTab" :drag-enabled="false">
8
8
  <template #slide="{ item }">
9
9
  <div :class="bem('slide')">
10
10
  <h1>{{ item.label }}</h1>
package/dev/demos/Demo-PxSlides.vue CHANGED
@@ -6,7 +6,7 @@
6
6
  <px-flex justify="center" gap="1">
7
7
  <button @click="clickPrev">Previous</button>
8
8
  <button @click="clickNext">Next</button>
9
- <px-toggle v-model="nested">Nested</px-toggle>
9
+ <px-toggle v-model:checked="nested">Nested</px-toggle>
10
10
  </px-flex>
11
11
  <px-slides :style="{ flex: 1 }" ref="slides" :items="fruits" items-key-property="id">
12
12
  <template #slide="{ item, index }">
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@thinkpixellab-public/px-vue",
3
- "version": "4.0.22",
3
+ "version": "4.0.24",
4
4
  "description": "General purpose Vue components and helpers that can be used across projects.",
5
5
  "author": {
6
6
  "name": "Pixel Lab"
@@ -20,57 +20,57 @@
20
20
  "chromatic": "npx chromatic --project-token=chpt_30d6cbeac803e5a"
21
21
  },
22
22
  "dependencies": {
23
- "@floating-ui/dom": "^1.6.7",
23
+ "@floating-ui/dom": "^1.6.11",
24
24
  "@popperjs/core": "^2.11.8",
25
- "@storybook/test": "^8.2.6",
25
+ "@storybook/test": "^8.3.4",
26
26
  "@thinkpixellab-public/px-styles": "^4.0.3",
27
27
  "@thinkpixellab-public/px-vue-tester": "^2.0.0",
28
28
  "@thinkpixellab-public/vue-resize-directive": "^1.2.2",
29
29
  "body-scroll-lock": "^3.1.5",
30
- "chrono-node": "^2.7.6",
30
+ "chrono-node": "^2.7.7",
31
31
  "dateformat": "^5.0.3",
32
32
  "gsap": "^3.12.5",
33
- "highlight.js": "^11.9.0",
33
+ "highlight.js": "^11.10.0",
34
34
  "mitt": "^3.0.1",
35
- "qrcode": "^1.5.3",
36
- "qrcode.vue": "^3.4.1",
37
- "sortablejs": "^1.15.2",
35
+ "qrcode": "^1.5.4",
36
+ "qrcode.vue": "^3.5.0",
37
+ "sortablejs": "^1.15.3",
38
38
  "storybook-dark-mode": "^4.0.2",
39
39
  "throttle-debounce": "^5.0.2",
40
40
  "tiny-date-picker": "^3.2.8",
41
41
  "tinycolor2": "^1.6.0",
42
- "vue": "^3.4.31",
43
- "vue-inline-svg": "^3.1.3"
42
+ "vue": "^3.5.10",
43
+ "vue-inline-svg": "^3.1.4"
44
44
  },
45
45
  "devDependencies": {
46
- "@babel/core": "^7.24.7",
47
- "@chromatic-com/storybook": "^1.6.1",
48
- "@rushstack/eslint-patch": "^1.10.3",
49
- "@storybook/addon-essentials": "^8.2.6",
50
- "@storybook/addon-interactions": "^8.2.6",
51
- "@storybook/addon-links": "^8.2.6",
52
- "@storybook/addon-mdx-gfm": "^8.2.6",
53
- "@storybook/blocks": "^8.2.6",
54
- "@storybook/manager-api": "^8.2.6",
55
- "@storybook/theming": "^8.2.6",
56
- "@storybook/vue3": "^8.2.6",
57
- "@storybook/vue3-vite": "^8.2.6",
58
- "@vitejs/plugin-vue": "^5.0.5",
46
+ "@babel/core": "^7.25.2",
47
+ "@chromatic-com/storybook": "^2.0.2",
48
+ "@rushstack/eslint-patch": "^1.10.4",
49
+ "@storybook/addon-essentials": "^8.3.4",
50
+ "@storybook/addon-interactions": "^8.3.4",
51
+ "@storybook/addon-links": "^8.3.4",
52
+ "@storybook/addon-mdx-gfm": "^8.3.4",
53
+ "@storybook/blocks": "^8.3.4",
54
+ "@storybook/manager-api": "^8.3.4",
55
+ "@storybook/theming": "^8.3.4",
56
+ "@storybook/vue3": "^8.3.4",
57
+ "@storybook/vue3-vite": "^8.3.4",
58
+ "@vitejs/plugin-vue": "^5.1.4",
59
59
  "@vue/eslint-config-prettier": "^9.0.0",
60
60
  "@vue/test-utils": "^2.4.6",
61
61
  "babel-eslint": "^10.1.0",
62
- "babel-loader": "^9.1.3",
63
- "chromatic": "^11.5.6",
64
- "eslint": "^9.6.0",
65
- "eslint-plugin-storybook": "^0.8.0",
66
- "eslint-plugin-vue": "^9.27.0",
67
- "jsdom": "^24.1.0",
68
- "prettier": "^3.3.2",
69
62
  "sass": "^1.77.6",
70
- "storybook": "^8.2.6",
71
- "storybook-addon-pseudo-states": "^3.1.1",
72
- "vite": "^5.3.2",
73
- "vitest": "^1.6.0",
63
+ "babel-loader": "^9.2.1",
64
+ "chromatic": "^11.11.0",
65
+ "eslint": "^9.11.1",
66
+ "eslint-plugin-storybook": "^0.9.0",
67
+ "eslint-plugin-vue": "^9.28.0",
68
+ "jsdom": "^25.0.1",
69
+ "prettier": "^3.3.3",
70
+ "storybook": "^8.3.4",
71
+ "storybook-addon-pseudo-states": "^4.0.2",
72
+ "vite": "^5.4.8",
73
+ "vitest": "^2.1.1",
74
74
  "vue-loader": "^17.4.2"
75
75
  },
76
76
  "bugs": {
package/stories/PxTextbox.stories.js CHANGED
@@ -28,7 +28,7 @@ export const Basic = {
28
28
  data() {
29
29
  return { sampleText: '' };
30
30
  },
31
- template: `<input v-model="sampleText" /> <br><br> <PxTextbox v-model:value="sampleText" v-bind="args"/> <br> <br> <PxTextbox :multiline="true" v-model:value="sampleText" v-bind="args"/> <br> <br> {{sampleText}}`,
31
+ template: `<input v-model="sampleText" /> <br><br> <PxTextbox v-model:text="sampleText" v-bind="args"/> <br> <br> <PxTextbox :multiline="true" v-model:text="sampleText" v-bind="args"/> <br> <br> {{sampleText}}`,
32
32
  args: {},
33
33
  }),
34
34
  };
package/.prettierrc.js DELETED
@@ -1,10 +0,0 @@
1
- module.exports = {
2
- semi: true,
3
- arrowParens: 'avoid',
4
- singleQuote: true,
5
- tabWidth: 4,
6
- printWidth: 100,
7
- bracketSpacing: true,
8
- htmlWhitespaceSensitivity: 'ignore',
9
- endOfLine: 'auto',
10
- };