@dolanske/vui 1.0.3 → 1.1.0

package/src/components/Kbd/Kbd.vue

@@ -1,48 +1,48 @@
-<script setup lang='ts'>
-import { useMagicKeys, whenever } from '@vueuse/core'
-import { computed } from 'vue'
-import './kbd.scss'
-
-interface Props {
-  /**
-   * Specify the key or the combination of keys connected with "+". Make sure
-   * there are no white spaces between letters.
-   *
-   * keys="Escape" keys="Ctrl+A"
-   */
-  keys: string
-  /**
-   * Display custom label instead of the automatically formatted keys.
-   */
-  label?: string
-  /**
-   * Show active state when this combination of keys is pressed.
-   */
-  highlight?: boolean
-}
-
-const props = defineProps<Props>()
-const emits = defineEmits<{
-  trigger: []
-}>()
-const keyHandler = useMagicKeys()
-
-whenever(keyHandler[props.keys], () => {
-  emits('trigger')
-})
-
-const isActive = computed(() => {
-  if (!props.highlight)
-    return false
-
-  return props.keys.split('+').every((key) => {
-    return keyHandler.current.has(key.toLowerCase())
-  })
-})
-</script>
-
-<template>
-  <kbd class="vui-kbd" :class="{ active: isActive }">
-    {{ props.label ?? props.keys.replaceAll("+", " + ") }}
-  </kbd>
-</template>
+<script setup lang='ts'>
+import { useMagicKeys, whenever } from '@vueuse/core'
+import { computed } from 'vue'
+import './kbd.scss'
+
+interface Props {
+  /**
+   * Specify the key or the combination of keys connected with "+". Make sure
+   * there are no white spaces between letters.
+   *
+   * keys="Escape" keys="Ctrl+A"
+   */
+  keys: string
+  /**
+   * Display custom label instead of the automatically formatted keys.
+   */
+  label?: string
+  /**
+   * Show active state when this combination of keys is pressed.
+   */
+  highlight?: boolean
+}
+
+const props = defineProps<Props>()
+const emits = defineEmits<{
+  trigger: []
+}>()
+const keyHandler = useMagicKeys()
+
+whenever(keyHandler[props.keys], () => {
+  emits('trigger')
+})
+
+const isActive = computed(() => {
+  if (!props.highlight)
+    return false
+
+  return props.keys.split('+').every((key) => {
+    return keyHandler.current.has(key.toLowerCase())
+  })
+})
+</script>
+
+<template>
+  <kbd class="vui-kbd" :class="{ active: isActive }">
+    {{ props.label ?? props.keys.replaceAll("+", " + ") }}
+  </kbd>
+</template>

package/src/components/Kbd/KbdGroup.vue

@@ -1,27 +1,27 @@
-<script setup lang='ts'>
-import type Kbd from './Kbd.vue'
-import { useMagicKeys, whenever } from '@vueuse/core'
-
-/**
- * Can be used to wrap multiple <Kbd /> elements and triggers the callback when
- * all of them are active
- */
-
-const emits = defineEmits<{
-  trigger: []
-}>()
-
-const slots = defineSlots<{
-  default: () => Array<typeof Kbd>
-}>()
-const keys = useMagicKeys()
-
-whenever(
-  keys[slots.default().map(vnode => vnode.props.keys).join('+')],
-  () => emits('trigger'),
-)
-</script>
-
-<template>
-  <slot />
-</template>
+<script setup lang='ts'>
+import type Kbd from './Kbd.vue'
+import { useMagicKeys, whenever } from '@vueuse/core'
+
+/**
+ * Can be used to wrap multiple <Kbd /> elements and triggers the callback when
+ * all of them are active
+ */
+
+const emits = defineEmits<{
+  trigger: []
+}>()
+
+const slots = defineSlots<{
+  default: () => Array<typeof Kbd>
+}>()
+const keys = useMagicKeys()
+
+whenever(
+  keys[slots.default().map(vnode => vnode.props.keys).join('+')],
+  () => emits('trigger'),
+)
+</script>
+
+<template>
+  <slot />
+</template>

package/src/components/Kbd/kbd.scss

@@ -1,19 +1,19 @@
-.vui-kbd {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  height: 24px;
-  border-radius: var(--border-radius-xs);
-  font-size: var(--font-size-s);
-  padding: 0 4px;
-  transition: var(--transition-fast);
-  font-weight: 600;
-  background-color: var(--color-button-gray);
-  color: var(--color-text-accent);
-
-  &.active {
-    transform: translateY(2px);
-    color: var(--color-text-invert);
-    background-color: var(--color-button-fill);
-  }
-}
+.vui-kbd {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 24px;
+  border-radius: var(--border-radius-xs);
+  font-size: var(--font-size-s);
+  padding: 0 4px;
+  transition: var(--transition-fast);
+  font-weight: 600;
+  background-color: var(--color-button-gray);
+  color: var(--color-text-accent);
+
+  &.active {
+    transform: translateY(2px);
+    color: var(--color-text-invert);
+    background-color: var(--color-button-fill);
+  }
+}

package/src/components/Modal/Confirm.vue

@@ -1,56 +1,56 @@
-<script setup lang='ts'>
-import type { Variants } from '../Button/Button.vue'
-import type { ModalProps } from './Modal.vue'
-import Button from '../Button/Button.vue'
-import Flex from '../Flex/Flex.vue'
-import Modal from './Modal.vue'
-
-type Props = {
-  title?: string
-  content?: string
-  confirmText?: string
-  confirmVariant?: Variants
-  cancelText?: string
-  showCancel?: boolean
-} & Partial<ModalProps>
-
-const props = withDefaults(defineProps<Props>(), {
-  cancelText: 'Cancel',
-  confirmText: 'Ok',
-  size: 's',
-  canDismiss: true,
-  showCancel: true,
-  confirmVariant: 'gray',
-})
-
-const emits = defineEmits<{
-  cancel: []
-  confirm: []
-}>()
-
-const open = defineModel<boolean>()
-</script>
-
-<template>
-  <pre>{{ $props }}</pre>
-  <Modal
-    v-bind="props"
-    v-model="open"
-  >
-    <template #default>
-      <div class="typeset">
-        <slot />
-      </div>
-    </template>
-    <template #footer>
-      <Flex justify-end>
-        <Button v-if="props.showCancel" plain @click="emits('cancel'), open = false">
-          {{ props.cancelText }}
-        </Button>
-        <Button :variant="props.confirmVariant" @click="emits('confirm'), open = false">
-          {{ props.confirmText }}
-        </Button>
-      </Flex>
-    </template>
-  </Modal>
-</template>
+<script setup lang='ts'>
+import type { Variants } from '../Button/Button.vue'
+import type { ModalProps } from './Modal.vue'
+import Button from '../Button/Button.vue'
+import Flex from '../Flex/Flex.vue'
+import Modal from './Modal.vue'
+
+type Props = {
+  title?: string
+  content?: string
+  confirmText?: string
+  confirmVariant?: Variants
+  cancelText?: string
+  showCancel?: boolean
+} & Partial<ModalProps>
+
+const props = withDefaults(defineProps<Props>(), {
+  cancelText: 'Cancel',
+  confirmText: 'Ok',
+  size: 's',
+  canDismiss: true,
+  showCancel: true,
+  confirmVariant: 'gray',
+  open: false,
+})
+
+const emit = defineEmits<{
+  cancel: []
+  confirm: []
+  close: []
+}>()
+</script>
+
+<template>
+  <Modal
+    v-bind="props"
+    :open="props.open"
+    @close="emit('close')"
+  >
+    <template #default>
+      <div class="typeset">
+        <slot />
+      </div>
+    </template>
+    <template #footer>
+      <Flex x-end>
+        <Button v-if="props.showCancel" plain @click="emit('cancel'), emit('close')">
+          {{ props.cancelText }}
+        </Button>
+        <Button :variant="props.confirmVariant" @click="emit('confirm'), emit('close')">
+          {{ props.confirmText }}
+        </Button>
+      </Flex>
+    </template>
+  </Modal>
+</template>

package/src/components/Modal/Modal.vue

@@ -1,99 +1,103 @@
-<script setup lang='ts'>
-import type { Sizes } from '../../shared/types'
-import type { Props as CardProps } from '../Card/Card.vue'
-import { useAttrs } from 'vue'
-import Backdrop from '../../internal/Backdrop/Backdrop.vue'
-import Button from '../Button/Button.vue'
-import Card from '../Card/Card.vue'
-import './modal.scss'
-
-export interface ModalProps {
-  size?: Sizes | 'full' | 'screen'
-  /**
-   * Modal wraps a floating card. You can optinally pass in any props you'd pass
-   * into the <Card /> component.
-   */
-  card?: CardProps
-  /**
-   * Modal will not overflow the screen, but its card's content will be scrollable instead.
-   */
-  scrollable?: boolean
-  /**
-   * Modal appears in the center of the screen
-   */
-  centered?: boolean
-  /**
-   * Wether modal can be closed by clicking the X button
-   */
-  canDismiss?: boolean
-}
-
-const {
-  size = 'm',
-  card = {},
-  scrollable,
-  centered,
-  canDismiss = true,
-} = defineProps<ModalProps>()
-
-const open = defineModel<boolean>()
-
-function close() {
-  open.value = false
-}
-
-const attrs = useAttrs()
-
-function tryClose() {
-  if (canDismiss) {
-    close()
-  }
-}
-</script>
-
-<template>
-  <Teleport to="body">
-    <Transition appear name="modal">
-      <Backdrop v-if="open" :class="{ 'p-0': size === 'screen' }" @close="tryClose">
-        <div class="vui-modal" :class="[`vui-modal-size-${size}`, { scrollable: scrollable || size === 'screen', centered }]" v-bind="attrs" @click.self="tryClose">
-          <Card v-bind="card">
-            <template v-if="$slots.header" #header>
-              <slot name="header" :close="close" />
-            </template>
-            <template #header-end>
-              <Button
-                v-if="canDismiss"
-                class="vui-modal-close"
-                plain
-                square
-                icon="ph:x"
-                @click="open = false"
-              />
-            </template>
-            <template v-if="$slots.default" #default>
-              <div>
-                <slot name="default" :close="close" />
-              </div>
-            </template>
-            <template v-if="$slots.footer" #footer>
-              <slot name="footer" :close="close" />
-            </template>
-          </Card>
-        </div>
-      </Backdrop>
-    </Transition>
-  </Teleport>
-</template>
-
-<style scoped>
-.modal-enter-active,
-.modal-leave-active {
-  transition: var(--transition);
-}
-
-.modal-enter-from,
-.modal-leave-to {
-  opacity: 0;
-  transform: scale(1.025);
-}
-</style>
+<script setup lang='ts'>
+import type { Sizes } from '../../shared/types'
+import type { Props as CardProps } from '../Card/Card.vue'
+import { useAttrs } from 'vue'
+import Backdrop from '../../internal/Backdrop/Backdrop.vue'
+import Button from '../Button/Button.vue'
+import Card from '../Card/Card.vue'
+import './modal.scss'
+
+export interface ModalProps {
+  /**
+   * Controls the visibility of the modal
+   */
+  open?: boolean
+  /**
+   * Controls the width of the modal
+   */
+  size?: Sizes | 'full' | 'screen'
+  /**
+   * Modal wraps a floating card. You can optinally pass in any props you'd pass
+   * into the <Card /> component.
+   */
+  card?: CardProps
+  /**
+   * Modal will not overflow the screen, but its card's content will be scrollable instead.
+   */
+  scrollable?: boolean
+  /**
+   * Modal appears in the center of the screen
+   */
+  centered?: boolean
+  /**
+   * Wether modal can be closed by clicking the X button
+   */
+  canDismiss?: boolean
+}
+
+const {
+  size = 'm',
+  card = {},
+  scrollable,
+  centered,
+  canDismiss = true,
+  open = false,
+} = defineProps<ModalProps>()
+
+const emit = defineEmits<{ close: [] }>()
+
+const attrs = useAttrs()
+
+function tryClose() {
+  if (canDismiss) {
+    emit('close')
+  }
+}
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition appear name="modal">
+      <Backdrop v-if="open" :class="{ 'p-0': size === 'screen' }" @close="tryClose">
+        <div class="vui-modal" :class="[`vui-modal-size-${size}`, { scrollable: scrollable || size === 'screen', centered }]" v-bind="attrs" @click.self="tryClose">
+          <Card v-bind="card">
+            <template v-if="$slots.header" #header>
+              <slot name="header" :close="() => emit('close')" />
+            </template>
+            <template #header-end>
+              <Button
+                v-if="canDismiss"
+                class="vui-modal-close"
+                plain
+                square
+                icon="ph:x"
+                @click="emit('close')"
+              />
+            </template>
+            <template v-if="$slots.default" #default>
+              <div>
+                <slot name="default" :close="() => emit('close')" />
+              </div>
+            </template>
+            <template v-if="$slots.footer" #footer>
+              <slot name="footer" :close="() => emit('close')" />
+            </template>
+          </Card>
+        </div>
+      </Backdrop>
+    </Transition>
+  </Teleport>
+</template>
+
+<style scoped>
+.modal-enter-active,
+.modal-leave-active {
+  transition: var(--transition);
+}
+
+.modal-enter-from,
+.modal-leave-to {
+  opacity: 0;
+  transform: scale(1.025);
+}
+</style>

package/src/components/Modal/modal.scss

@@ -1,54 +1,54 @@
-.vui-modal {
-  width: 100%;
-  margin-inline: auto;
-  height: 100%;
-  position: relative;
-
-  &.centered {
-    display: flex;
-    align-items: center;
-  }
-
-  &.vui-modal-size-s {
-    max-width: 440px;
-  }
-
-  &.vui-modal-size-m {
-    max-width: 620px;
-  }
-
-  &.vui-modal-size-l {
-    max-width: 728px;
-  }
-
-  &.vui-modal-size-screen {
-    position: fixed;
-    inset: 0;
-
-    & > .vui-card {
-      border-radius: 0;
-      border: none;
-      height: 100vh;
-    }
-  }
-
-  &.scrollable {
-    & > .vui-card {
-      display: flex;
-      flex-direction: column;
-      inline-size: 100%;
-      max-height: 100%;
-
-      .vui-card-content {
-        flex: 1 1 0%;
-        overflow-y: auto;
-      }
-    }
-  }
-
-  & > .vui-card {
-    width: 100%;
-    margin-bottom: var(--backdrop-offset);
-    box-shadow: var(--box-shadow-strong);
-  }
-}
+.vui-modal {
+  width: 100%;
+  margin-inline: auto;
+  height: 100%;
+  position: relative;
+
+  &.centered {
+    display: flex;
+    align-items: center;
+  }
+
+  &.vui-modal-size-s {
+    max-width: 440px;
+  }
+
+  &.vui-modal-size-m {
+    max-width: 620px;
+  }
+
+  &.vui-modal-size-l {
+    max-width: 728px;
+  }
+
+  &.vui-modal-size-screen {
+    position: fixed;
+    inset: 0;
+
+    & > .vui-card {
+      border-radius: 0;
+      border: none;
+      height: 100vh;
+    }
+  }
+
+  &.scrollable {
+    & > .vui-card {
+      display: flex;
+      flex-direction: column;
+      inline-size: 100%;
+      max-height: 100%;
+
+      .vui-card-content {
+        flex: 1 1 0%;
+        overflow-y: auto;
+      }
+    }
+  }
+
+  & > .vui-card {
+    width: 100%;
+    margin-bottom: var(--backdrop-offset);
+    box-shadow: var(--box-shadow-strong);
+  }
+}