@citizenplane/pimp 18.3.0 → 18.5.0

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 (10) hide show
  1. package/dist/components/CpDialog.vue.d.ts +1 -0
  2. package/dist/components/CpDialog.vue.d.ts.map +1 -1
  3. package/dist/components/icons/IconBaggageCabinNone.vue.d.ts.map +1 -1
  4. package/dist/pimp.es.js +553 -548
  5. package/dist/pimp.umd.js +34 -34
  6. package/package.json +1 -1
  7. package/src/components/CpDialog.vue +13 -2
  8. package/src/components/icons/IconBaggageCabin.vue +3 -3
  9. package/src/components/icons/IconBaggageCabinNone.vue +7 -19
  10. package/src/stories/CpDialog.stories.ts +30 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@citizenplane/pimp",
3
- "version": "18.3.0",
3
+ "version": "18.5.0",
4
4
  "scripts": {
5
5
  "dev": "storybook dev -p 8081",
6
6
  "build-storybook": "storybook build --output-dir ./docs",
package/src/components/CpDialog.vue CHANGED
@@ -23,7 +23,13 @@
23
23
  </slot>
24
24
  </div>
25
25
  </div>
26
- <button aria-label="Close dialog" class="cpDialog__close" type="button" @click="handleClose">
26
+ <button
27
+ v-if="!preventClose"
28
+ aria-label="Close dialog"
29
+ class="cpDialog__close"
30
+ type="button"
31
+ @click="handleClose"
32
+ >
27
33
  <cp-icon aria-hidden="true" type="x" />
28
34
  </button>
29
35
  </header>
@@ -46,6 +52,7 @@ import { getKeyboardFocusableElements, handleTrapFocus } from '@/helpers/dom'
46
52
  interface Props {
47
53
  isClosableOnClickOutside?: boolean
48
54
  maxWidth?: number
55
+ preventClose?: boolean
49
56
  subtitle?: string
50
57
  title?: string
51
58
  }
@@ -88,7 +95,11 @@ const hasTitleOrSubtitle = computed(() => hasTitle.value || hasSubtitle.value)
88
95
 
89
96
  const hasFooterSlot = computed(() => !!slots.footer)
90
97
 
91
- const handleClose = () => emit('close')
98
+ const handleClose = () => {
99
+ if (props.preventClose) return
100
+ emit('close')
101
+ }
102
+
92
103
  const trapFocus = (event: KeyboardEvent) => handleTrapFocus(event, dialogContainer.value)
93
104
 
94
105
  const openDialog = () => dialogElement.value?.show()
package/src/components/icons/IconBaggageCabin.vue CHANGED
@@ -1,12 +1,12 @@
1
1
  <template>
2
2
  <svg fill="currentColor" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
3
- <path
4
- d="M14.1104 11.1182C14.6626 11.1182 15.1104 11.5659 15.1104 12.1182C15.1102 12.6703 14.6625 13.1182 14.1104 13.1182H11.9492V13.1992C11.9489 13.7512 11.5013 14.1992 10.9492 14.1992C10.3972 14.1991 9.94954 13.7512 9.94922 13.1992V13.1172C9.39762 13.1165 8.95039 12.6699 8.9502 12.1182C8.9502 11.566 9.39802 11.1183 9.9502 11.1182H14.1104Z"
5
- />
6
3
  <path
7
4
  clip-rule="evenodd"
8
5
  d="M15 2C15.5523 2 16 2.44772 16 3C16 3.55228 15.5523 4 15 4H14.4199V7.87207H15.8115C16.9158 7.87226 17.8113 8.76779 17.8115 9.87207V19.0947C17.8115 20.1992 16.9159 21.0945 15.8115 21.0947H15.5488C15.5259 21.6267 15.0884 22.0518 14.5508 22.0518C14.0131 22.0518 13.5756 21.6267 13.5527 21.0947H10.5381C10.5152 21.6266 10.0785 22.0516 9.54102 22.0518C9.00339 22.0518 8.56586 21.6267 8.54297 21.0947H8.19434C7.08976 21.0947 6.19434 20.1993 6.19434 19.0947V9.87207C6.19453 8.76767 7.08989 7.87207 8.19434 7.87207H9.58594V4H9.00586C8.45357 4 8.00586 3.55228 8.00586 3C8.00586 2.44772 8.45357 2 9.00586 2H15ZM8.19434 19.0947H15.8115V9.87207H8.19434V19.0947ZM11.5859 4V7.87207H12.4199V4H11.5859Z"
9
6
  fill-rule="evenodd"
10
7
  />
8
+ <path
9
+ d="M14.0495 11.0793C14.4634 11.0796 14.7993 11.4154 14.7995 11.8293C14.7995 12.2434 14.4635 12.5791 14.0495 12.5793H12.0033V12.5884C12.0031 13.0024 11.6674 13.3384 11.2533 13.3384C10.8394 13.3382 10.5035 13.0023 10.5033 12.5884V12.5793H9.95054C9.53633 12.5793 9.20054 12.2436 9.20054 11.8293C9.20074 11.4153 9.53645 11.0793 9.95054 11.0793H14.0495Z"
10
+ />
11
11
  </svg>
12
12
  </template>
package/src/components/icons/IconBaggageCabinNone.vue CHANGED
@@ -1,24 +1,12 @@
1
1
  <template>
2
- <svg
3
- fill="none"
4
- height="24"
5
- stroke="currentColor"
6
- stroke-linecap="round"
7
- stroke-linejoin="round"
8
- stroke-width="2"
9
- viewBox="0 0 24 24"
10
- width="24"
11
- xmlns="http://www.w3.org/2000/svg"
12
- >
2
+ <svg fill="currentColor" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
13
3
  <path
14
- d="M15.8056 20.0955H8.18876C7.63648 20.0955 7.18876 19.6478 7.18876 19.0955V11.4758M9.80047 8.87244H11.4122H15.8056C16.3579 8.87244 16.8056 9.32015 16.8056 9.87244V16.219"
4
+ d="M7.18857 10.4756C7.74062 10.4757 8.18837 10.9235 8.18857 11.4756V19.0947H15.8058C16.3577 19.0949 16.8053 19.5429 16.8058 20.0947C16.8058 20.6469 16.3579 21.0946 15.8058 21.0947H15.4571C15.4342 21.6267 14.9967 22.0517 14.4591 22.0518C13.9215 22.0517 13.4839 21.6267 13.461 21.0947H10.4474C10.4245 21.6267 9.98684 22.0516 9.44931 22.0518C8.91168 22.0518 8.47416 21.6267 8.45126 21.0947H8.18857C7.08416 21.0945 6.18857 20.1992 6.18857 19.0947V11.4756C6.18877 10.9236 6.63657 10.4758 7.18857 10.4756Z"
5
+ />
6
+ <path
7
+ clip-rule="evenodd"
8
+ d="M14.9942 2C15.5464 2.00013 15.9942 2.4478 15.9942 3C15.9942 3.5522 15.5464 3.99987 14.9942 4H14.4142V7.87207H15.8058C16.9101 7.8722 17.8056 8.76775 17.8058 9.87207V16.2188C17.8057 16.2726 17.7993 16.3254 17.7911 16.377L21.7071 20.293C22.0974 20.6835 22.0975 21.3166 21.7071 21.707C21.3167 22.0975 20.6836 22.0973 20.2931 21.707L2.29306 3.70703C1.90254 3.31651 1.90254 2.68349 2.29306 2.29297C2.68359 1.90255 3.31663 1.90248 3.70712 2.29297L9.37998 7.96582C9.44348 7.93631 9.51028 7.91221 9.58017 7.89648V4H9.00009C8.44781 4 8.00009 3.55228 8.00009 3C8.00009 2.44772 8.44781 2 9.00009 2H14.9942ZM15.8058 14.3916V9.87207H11.2862L15.8058 14.3916ZM11.5802 7.87207H12.4142V4H11.5802V7.87207Z"
9
+ fill-rule="evenodd"
15
10
  />
16
- <path d="M14.4593 20.0955V21.051" />
17
- <path d="M9.44919 20.0955V21.051" />
18
- <path d="M13.4143 3L13.4143 8.80565" />
19
- <path d="M10.58 3L10.58 8.80565" />
20
- <path d="M3 3L21 21" />
21
- <path d="M12.4378 12.1178H14.0499" />
22
- <path d="M8.99997 3L14.9944 3" />
23
11
  </svg>
24
12
  </template>
package/src/stories/CpDialog.stories.ts CHANGED
@@ -179,3 +179,33 @@ export const ClosableOnClickOutside: Story = {
179
179
  `,
180
180
  }),
181
181
  }
182
+
183
+ /**
184
+ * Prevent the dialog from being closed by the user.
185
+ */
186
+ export const PreventClose: Story = {
187
+ args: {
188
+ maxWidth: 600,
189
+ preventClose: true,
190
+ },
191
+ render: (args) => ({
192
+ setup() {
193
+ const isOpen = ref(false)
194
+ return { args, isOpen }
195
+ },
196
+ template: `
197
+ <CpButton @click="isOpen = true">Open Dialog</CpButton>
198
+ <CpTransitionDialog>
199
+ <CpDialog v-bind="args" v-if="isOpen" @close="isOpen = false">
200
+ <template #title>Header slot</template>
201
+ <template #subtitle>Subtitle</template>
202
+ <p>This is the default slot content. You can put any content here.</p>
203
+ <template #footer>
204
+ <CpButton @click="isOpen = false">Cancel</CpButton>
205
+ This is the footer slot
206
+ </template>
207
+ </CpDialog>
208
+ </CpTransitionDialog>
209
+ `,
210
+ }),
211
+ }