@dolanske/vui 0.3.4 → 0.4.0

package/src/components/Kbd/KbdGroup.vue

@@ -1,31 +1,31 @@
-<script setup lang='ts'>
-import type { VNode } from '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<VNode & {
-    props: {
-      keys: string
-    }
-  }>
-}>()
-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 { VNode } from '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<VNode & {
+    props: {
+      keys: string
+    }
+  }>
+}>()
+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,18 +1,18 @@
-.vui-kbd {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 24px;
-  border-radius: var(--border-radius-xs);
-  // border: 1px solid var(--color-border-strong);
-  font-size: var(--font-size-s);
-  padding: 0 4px;
-  transition: var(--transition);
-  font-weight: 600;
-  background-color: var(--color-text);
-  color: var(--color-text-invert);
-
-  &.active {
-    background-color: var(--color-text-yellow);
-  }
-}
+.vui-kbd {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 24px;
+  border-radius: var(--border-radius-xs);
+  // border: 1px solid var(--color-border-strong);
+  font-size: var(--font-size-s);
+  padding: 0 4px;
+  transition: var(--transition);
+  font-weight: 600;
+  background-color: var(--color-text);
+  color: var(--color-text-invert);
+
+  &.active {
+    background-color: var(--color-text-yellow);
+  }
+}

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: 'default',
-})
-
-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: 'default',
+})
+
+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>

package/src/components/Modal/Modal.vue

@@ -1,91 +1,91 @@
-<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'
-  /**
-   * 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()
-</script>
-
-<template>
-  <Teleport to="body">
-    <Transition appear name="modal">
-      <Backdrop v-if="open" @close="close">
-        <div class="vui-modal" :class="[`vui-modal-size-${size}`, { scrollable, centered }]" v-bind="attrs">
-          <Button
-            v-if="canDismiss"
-            class="vui-modal-close"
-            plain
-            square
-            icon="ph:x"
-            @click="open = false"
-          />
-          <Card v-bind="card">
-            <template v-if="$slots.header" #header>
-              <slot name="header" :close />
-            </template>
-            <template v-if="$slots.default" #default>
-              <div>
-                <slot name="default" :close />
-              </div>
-            </template>
-            <template v-if="$slots.footer" #footer>
-              <slot name="footer" :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(0.95);
-}
-</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 {
+  size?: Sizes | 'full'
+  /**
+   * 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()
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition appear name="modal">
+      <Backdrop v-if="open" @close="close">
+        <div class="vui-modal" :class="[`vui-modal-size-${size}`, { scrollable, centered }]" v-bind="attrs">
+          <Button
+            v-if="canDismiss"
+            class="vui-modal-close"
+            plain
+            square
+            icon="ph:x"
+            @click="open = false"
+          />
+          <Card v-bind="card">
+            <template v-if="$slots.header" #header>
+              <slot name="header" :close />
+            </template>
+            <template v-if="$slots.default" #default>
+              <div>
+                <slot name="default" :close />
+              </div>
+            </template>
+            <template v-if="$slots.footer" #footer>
+              <slot name="footer" :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(0.95);
+}
+</style>

package/src/components/Modal/modal.scss

@@ -1,49 +1,49 @@
-.vui-modal {
-  width: 100%;
-  margin-inline: auto;
-  height: 100%;
-  position: relative;
-
-  .vui-modal-close {
-    position: absolute;
-    top: 16px;
-    right: 16px;
-  }
-
-  &.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;
-  }
-
-  &.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;
+
+  .vui-modal-close {
+    position: absolute;
+    top: 16px;
+    right: 16px;
+  }
+
+  &.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;
+  }
+
+  &.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);
+  }
+}