@dolanske/vui 1.0.3 → 1.1.0

package/src/components/Select/select.scss

@@ -1,77 +1,77 @@
-.vui-input-container {
-  &.vui-select {
-    width: auto;
-
-    &.expand {
-      .vui-dropdown-trigger-wrap,
-      .vui-dropdown-trigger-content {
-        width: 100%;
-      }
-    }
-
-    &.disabled {
-      .vui-input-style {
-        cursor: not-allowed;
-
-        &:hover {
-          border-color: var(--color-border);
-        }
-      }
-    }
-
-    .vui-select-trigger-container {
-      &.has-value span {
-        color: var(--color-text);
-        font-weight: var(--font-weight-medium);
-      }
-
-      span {
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        overflow-x: hidden;
-      }
-    }
-
-    .vue-select-no-results {
-      text-align: center;
-      padding-block: var(--space-xs);
-    }
-
-    .vui-input-style {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: var(--space-s);
-
-      & > button {
-        margin-right: -6px;
-
-        .vui-button-slot svg {
-          color: var(--color-text-light);
-        }
-      }
-
-      &:hover {
-        border-color: var(--color-border-strong);
-      }
-    }
-  }
-}
-
-select {
-  display: block;
-  height: var(--interactive-el-height);
-  line-height: var(--interactive-el-height);
-  background-color: var(--color-bg);
-  border: 1px solid var(--color-border);
-  border-radius: var(--border-radius-s);
-  padding-inline: var(--space-xs);
-  transition: var(--transition-fast);
-  z-index: 1;
-  font-size: var(--font-size-m);
-  color: var(--color-text);
-
-  &:hover {
-    border-color: var(--color-border-strong);
-  }
-}
+.vui-input-container {
+  &.vui-select {
+    width: auto;
+
+    &.expand {
+      .vui-dropdown-trigger-wrap,
+      .vui-dropdown-trigger-content {
+        width: 100%;
+      }
+    }
+
+    &.disabled {
+      .vui-input-style {
+        cursor: not-allowed;
+
+        &:hover {
+          border-color: var(--color-border);
+        }
+      }
+    }
+
+    .vui-select-trigger-container {
+      &.has-value span {
+        color: var(--color-text);
+        font-weight: var(--font-weight-medium);
+      }
+
+      span {
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow-x: hidden;
+      }
+    }
+
+    .vue-select-no-results {
+      text-align: center;
+      padding-block: var(--space-xs);
+    }
+
+    .vui-input-style {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: var(--space-s);
+
+      & > button {
+        margin-right: -6px;
+
+        .vui-button-slot svg {
+          color: var(--color-text-light);
+        }
+      }
+
+      &:hover {
+        border-color: var(--color-border-strong);
+      }
+    }
+  }
+}
+
+select {
+  display: block;
+  height: var(--interactive-el-height);
+  line-height: var(--interactive-el-height);
+  background-color: var(--color-bg);
+  border: 1px solid var(--color-border);
+  border-radius: var(--border-radius-s);
+  padding-inline: var(--space-xs);
+  transition: var(--transition-fast);
+  z-index: 1;
+  font-size: var(--font-size-m);
+  color: var(--color-text);
+
+  &:hover {
+    border-color: var(--color-border-strong);
+  }
+}

package/src/components/Sheet/Sheet.vue

@@ -1,98 +1,108 @@
-<script setup lang='ts'>
-import { computed } from 'vue'
-import Backdrop from '../../internal/Backdrop/Backdrop.vue'
-import { formatUnitValue } from '../../shared/helpers'
-import Button from '../Button/Button.vue'
-import Divider from '../Divider/Divider.vue'
-import './sheet.scss'
-
-interface Props {
-  position?: 'left' | 'right' | 'top' | 'bottom'
-  size?: number | string
-  separator?: boolean
-}
-
-const {
-  position = 'right',
-  size = 398,
-  separator,
-} = defineProps<Props>()
-
-const TRANSITION_OFFSET = 16
-
-const open = defineModel<boolean>()
-
-function close() {
-  open.value = false
-}
-
-const style = computed(() => {
-  if (position === 'left' || position === 'right') {
-    return { width: formatUnitValue(size) }
-  }
-
-  return undefined
-})
-
-// Used to compute base location so that sheet appears to animate form the edge of the screen
-const baseTransform = computed(() => {
-  switch (position) {
-    case 'left': return `translate(-${TRANSITION_OFFSET}px, 0)`
-    case 'top': return `translate(0, -${TRANSITION_OFFSET}px)`
-    case 'bottom': return `translate(0, ${TRANSITION_OFFSET}px)`
-    case 'right':
-    default: return `translate(${TRANSITION_OFFSET}px, 0)`
-  }
-})
-</script>
-
-<template>
-  <Teleport to="body">
-    <Transition appear name="sheet">
-      <Backdrop v-if="open" @close="open = false">
-        <div v-if="open" class="vui-sheet" :class="[`vui-sheet-position-${position}`]" :style>
-          <div class="vui-sheet-header">
-            <div class="flex-1">
-              <slot name="header" :close />
-            </div>
-            <Button plain square icon="ph:x" @click="open = false" />
-          </div>
-
-          <Divider v-if="separator && $slots.header" :size="1" />
-
-          <div v-if="$slots.default" class="vui-sheet-content">
-            <slot :close />
-          </div>
-
-          <Divider v-if="separator && $slots.footer" :size="1" />
-
-          <div class="vui-sheet-footer">
-            <slot name="footer" :close />
-          </div>
-        </div>
-      </Backdrop>
-    </Transition>
-  </Teleport>
-</template>
-
-<style scoped lang="scss">
-.vui-backdrop {
-  padding: 0;
-}
-
-.sheet-enter-active,
-.sheet-leave-active {
-  transition: var(--transition);
-}
-
-.sheet-enter-to,
-.sheet-leave-from {
-  transform: translate(0, 0);
-}
-
-.sheet-enter-from,
-.sheet-leave-to {
-  opacity: 0;
-  transform: v-bind(baseTransform);
-}
-</style>
+<script setup lang='ts'>
+import { computed } from 'vue'
+import Backdrop from '../../internal/Backdrop/Backdrop.vue'
+import { formatUnitValue } from '../../shared/helpers'
+import Button from '../Button/Button.vue'
+import Divider from '../Divider/Divider.vue'
+import './sheet.scss'
+
+interface Props {
+  /**
+   * Controls the visibility of the sheet
+   */
+  open?: boolean
+  /**
+   * Controls the position of the sheet
+   */
+  position?: 'left' | 'right' | 'top' | 'bottom'
+  /**
+   * Sets the width of the sheet
+   */
+  size?: number | string
+  /**
+   * Wether to show a divider between header and content
+   */
+  separator?: boolean
+}
+
+const {
+  position = 'right',
+  size = 398,
+  separator,
+  open = false,
+} = defineProps<Props>()
+
+const emit = defineEmits<{ close: [] }>()
+
+const TRANSITION_OFFSET = 16
+
+const style = computed(() => {
+  if (position === 'left' || position === 'right') {
+    return { width: formatUnitValue(size) }
+  }
+
+  return undefined
+})
+
+// Used to compute base location so that sheet appears to animate form the edge of the screen
+const baseTransform = computed(() => {
+  switch (position) {
+    case 'left': return `translate(-${TRANSITION_OFFSET}px, 0)`
+    case 'top': return `translate(0, -${TRANSITION_OFFSET}px)`
+    case 'bottom': return `translate(0, ${TRANSITION_OFFSET}px)`
+    case 'right':
+    default: return `translate(${TRANSITION_OFFSET}px, 0)`
+  }
+})
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition appear name="sheet">
+      <Backdrop v-if="open" @close="emit('close')">
+        <div v-if="open" class="vui-sheet" :class="[`vui-sheet-position-${position}`]" :style>
+          <div class="vui-sheet-header">
+            <div class="flex-1">
+              <slot name="header" :close="() => emit('close')" />
+            </div>
+            <Button plain square icon="ph:x" @click="emit('close')" />
+          </div>
+
+          <Divider v-if="separator && $slots.header" :size="1" />
+
+          <div v-if="$slots.default" class="vui-sheet-content">
+            <slot :close="() => emit('close')" />
+          </div>
+
+          <Divider v-if="separator && $slots.footer" :size="1" />
+
+          <div class="vui-sheet-footer">
+            <slot name="footer" :close="() => emit('close')" />
+          </div>
+        </div>
+      </Backdrop>
+    </Transition>
+  </Teleport>
+</template>
+
+<style scoped lang="scss">
+.vui-backdrop {
+  padding: 0;
+}
+
+.sheet-enter-active,
+.sheet-leave-active {
+  transition: var(--transition);
+}
+
+.sheet-enter-to,
+.sheet-leave-from {
+  transform: translate(0, 0);
+}
+
+.sheet-enter-from,
+.sheet-leave-to {
+  opacity: 0;
+  transform: v-bind(baseTransform);
+}
+</style>

package/src/components/Sheet/sheet.scss

@@ -1,69 +1,69 @@
-.vui-sheet {
-  display: flex;
-  flex-direction: column;
-  position: absolute;
-  background-color: var(--color-bg);
-  border-color: var(--color-border);
-  height: 100dvh;
-
-  &.vui-sheet-position-top {
-    top: 0;
-    border-bottom: 1px solid var(--color-border);
-    height: auto;
-    border-bottom-right-radius: var(--border-radius-l);
-    border-bottom-left-radius: var(--border-radius-l);
-  }
-
-  &.vui-sheet-position-bottom {
-    bottom: 0;
-    border-top: 1px solid var(--color-border);
-    height: auto;
-    border-top-right-radius: var(--border-radius-l);
-    border-top-left-radius: var(--border-radius-l);
-  }
-
-  &.vui-sheet-position-right {
-    right: 0;
-    top: 0;
-    border-left: 1px solid var(--color-border);
-    border-top-left-radius: var(--border-radius-l);
-    border-bottom-left-radius: var(--border-radius-l);
-  }
-
-  &.vui-sheet-position-left {
-    left: 0;
-    top: 0;
-    border-right: 1px solid var(--color-border);
-    border-top-right-radius: var(--border-radius-l);
-    border-bottom-right-radius: var(--border-radius-l);
-  }
-
-  &.vui-sheet-position-top,
-  &.vui-sheet-position-bottom {
-    max-height: 35dvh;
-    width: 100%;
-  }
-
-  .vui-sheet-footer,
-  .vui-sheet-header,
-  .vui-sheet-content {
-    width: 100%;
-    padding: var(--space-m);
-  }
-
-  .vui-sheet-content {
-    flex: 1 1 0%;
-    overflow-y: auto;
-    height: 100%;
-  }
-
-  .vui-sheet-header {
-    display: flex;
-    gap: var(--space-m);
-    align-self: flex-start;
-
-    & + .vui-sheet-content {
-      padding-top: var(--space-s);
-    }
-  }
-}
+.vui-sheet {
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  background-color: var(--color-bg);
+  border-color: var(--color-border);
+  height: 100dvh;
+
+  &.vui-sheet-position-top {
+    top: 0;
+    border-bottom: 1px solid var(--color-border);
+    height: auto;
+    border-bottom-right-radius: var(--border-radius-l);
+    border-bottom-left-radius: var(--border-radius-l);
+  }
+
+  &.vui-sheet-position-bottom {
+    bottom: 0;
+    border-top: 1px solid var(--color-border);
+    height: auto;
+    border-top-right-radius: var(--border-radius-l);
+    border-top-left-radius: var(--border-radius-l);
+  }
+
+  &.vui-sheet-position-right {
+    right: 0;
+    top: 0;
+    border-left: 1px solid var(--color-border);
+    border-top-left-radius: var(--border-radius-l);
+    border-bottom-left-radius: var(--border-radius-l);
+  }
+
+  &.vui-sheet-position-left {
+    left: 0;
+    top: 0;
+    border-right: 1px solid var(--color-border);
+    border-top-right-radius: var(--border-radius-l);
+    border-bottom-right-radius: var(--border-radius-l);
+  }
+
+  &.vui-sheet-position-top,
+  &.vui-sheet-position-bottom {
+    max-height: 35dvh;
+    width: 100%;
+  }
+
+  .vui-sheet-footer,
+  .vui-sheet-header,
+  .vui-sheet-content {
+    width: 100%;
+    padding: var(--space-m);
+  }
+
+  .vui-sheet-content {
+    flex: 1 1 0%;
+    overflow-y: auto;
+    height: 100%;
+  }
+
+  .vui-sheet-header {
+    display: flex;
+    gap: var(--space-m);
+    align-self: flex-start;
+
+    & + .vui-sheet-content {
+      padding-top: var(--space-s);
+    }
+  }
+}