@storybook/vue3 9.0.0-alpha.20 → 9.0.0-alpha.21

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.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@storybook/vue3",
3
- "version": "9.0.0-alpha.20",
3
+ "version": "9.0.0-alpha.21",
4
4
  "description": "Storybook Vue 3 renderer",
5
5
  "keywords": [
6
6
  "storybook"
@@ -77,7 +77,7 @@
77
77
  "vue-tsc": "latest"
78
78
  },
79
79
  "peerDependencies": {
80
- "storybook": "^9.0.0-alpha.20",
80
+ "storybook": "^9.0.0-alpha.21",
81
81
  "vue": "^3.0.0"
82
82
  },
83
83
  "engines": {
@@ -3,8 +3,9 @@
3
3
  </template>
4
4
 
5
5
  <script>
6
+ import { computed, reactive } from 'vue';
7
+
6
8
  import './button.css';
7
- import { reactive, computed } from 'vue';
8
9
 
9
10
  export default {
10
11
  name: 'my-button',
@@ -40,8 +40,8 @@
40
40
  </template>
41
41
 
42
42
  <script>
43
- import './header.css';
44
43
  import MyButton from './Button.vue';
44
+ import './header.css';
45
45
 
46
46
  export default {
47
47
  name: 'my-header',
@@ -54,8 +54,8 @@
54
54
  </template>
55
55
 
56
56
  <script>
57
- import './page.css';
58
57
  import MyHeader from './Header.vue';
58
+ import './page.css';
59
59
 
60
60
  export default {
61
61
  name: 'my-page',
@@ -1,30 +1,33 @@
1
1
  <template>
2
- <button type="button" :class="classes" @click="onClick" :style="style">{{ label }} </button>
2
+ <button type="button" :class="classes" @click="onClick" :style="style">{{ label }}</button>
3
3
  </template>
4
4
 
5
5
  <script lang="ts" setup>
6
- import './button.css';
7
6
  import { computed } from 'vue';
8
7
 
9
- const props = withDefaults(defineProps<{
10
- /**
11
- * The label of the button
12
- */
13
- label: string,
14
- /**
15
- * primary or secondary button
16
- */
17
- primary?: boolean,
18
- /**
19
- * size of the button
20
- */
21
- size?: 'small' | 'medium' | 'large',
22
- /**
23
- * background color of the button
24
- */
25
- backgroundColor?: string,
8
+ import './button.css';
26
9
 
27
- }>(), { primary: false });
10
+ const props = withDefaults(
11
+ defineProps<{
12
+ /**
13
+ * The label of the button
14
+ */
15
+ label: string;
16
+ /**
17
+ * primary or secondary button
18
+ */
19
+ primary?: boolean;
20
+ /**
21
+ * size of the button
22
+ */
23
+ size?: 'small' | 'medium' | 'large';
24
+ /**
25
+ * background color of the button
26
+ */
27
+ backgroundColor?: string;
28
+ }>(),
29
+ { primary: false }
30
+ );
28
31
 
29
32
  const emit = defineEmits<{
30
33
  (e: 'click', id: number): void;
@@ -38,11 +41,10 @@ const classes = computed(() => ({
38
41
  }));
39
42
 
40
43
  const style = computed(() => ({
41
- backgroundColor: props.backgroundColor
44
+ backgroundColor: props.backgroundColor,
42
45
  }));
43
46
 
44
47
  const onClick = () => {
45
- emit("click", 1)
48
+ emit('click', 1);
46
49
  };
47
-
48
- </script>
50
+ </script>
@@ -4,26 +4,44 @@
4
4
  <div>
5
5
  <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
6
6
  <g fill="none" fill-rule="evenodd">
7
- <path d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z" fill="#FFF" />
8
- <path d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z" fill="#555AB9" />
9
- <path d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z" fill="#91BAF8" />
7
+ <path
8
+ d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
9
+ fill="#FFF"
10
+ />
11
+ <path
12
+ d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z"
13
+ fill="#555AB9"
14
+ />
15
+ <path
16
+ d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z"
17
+ fill="#91BAF8"
18
+ />
10
19
  </g>
11
20
  </svg>
12
21
  <h1>Acme</h1>
13
22
  </div>
14
23
  <div>
15
- <span class="welcome" v-if="user">Welcome, <b>{{ user.name }}</b>!</span>
24
+ <span class="welcome" v-if="user"
25
+ >Welcome, <b>{{ user.name }}</b
26
+ >!</span
27
+ >
16
28
  <my-button size="small" @click="$emit('logout')" label="Log out" v-if="user" />
17
29
  <my-button size="small" @click="$emit('login')" label="Log in" v-if="!user" />
18
- <my-button primary size="small" @click="$emit('createAccount')" label="Sign up" v-if="!user" />
30
+ <my-button
31
+ primary
32
+ size="small"
33
+ @click="$emit('createAccount')"
34
+ label="Sign up"
35
+ v-if="!user"
36
+ />
19
37
  </div>
20
38
  </div>
21
39
  </header>
22
40
  </template>
23
41
 
24
42
  <script lang="ts" setup>
25
- import './header.css';
26
43
  import MyButton from './Button.vue';
44
+ import './header.css';
27
45
 
28
46
  defineProps<{ user: { name: string } | null }>();
29
47
 
@@ -32,6 +50,4 @@ defineEmits<{
32
50
  (event: 'login'): void;
33
51
  (event: 'logout'): void;
34
52
  }>();
35
-
36
53
  </script>
37
-
File without changes
File without changes
File without changes
@@ -54,11 +54,11 @@
54
54
  </template>
55
55
 
56
56
  <script lang="ts" setup>
57
- import './page.css';
58
- import MyHeader from './Header.vue';
59
-
60
57
  import { ref } from 'vue';
61
58
 
59
+ import MyHeader from './Header.vue';
60
+ import './page.css';
61
+
62
62
  const user = ref<{ name: string } | null>(null);
63
63
 
64
64
  const onLogin = () => {