@dolanske/vui 0.3.4 → 0.5.0

package/src/components/ButtonGroup/ButtonGroup.vue

@@ -1,25 +1,25 @@
-<script setup lang='ts'>
-import Flex from '../Flex/Flex.vue'
-import './button-group.scss'
-
-interface Props {
-  vertical?: boolean
-}
-
-const {
-  vertical,
-} = defineProps<Props>()
-</script>
-
-<template>
-  <Flex
-    :row="!vertical"
-    :column="vertical"
-    class="vui-button-group"
-    :class="{ vertical }"
-    :gap="0"
-    inline
-  >
-    <slot />
-  </Flex>
-</template>
+<script setup lang='ts'>
+import Flex from '../Flex/Flex.vue'
+import './button-group.scss'
+
+interface Props {
+  vertical?: boolean
+}
+
+const {
+  vertical,
+} = defineProps<Props>()
+</script>
+
+<template>
+  <Flex
+    :row="!vertical"
+    :column="vertical"
+    class="vui-button-group"
+    :class="{ vertical }"
+    :gap="0"
+    inline
+  >
+    <slot />
+  </Flex>
+</template>

package/src/components/ButtonGroup/button-group.scss

@@ -1,51 +1,51 @@
-.vui-button-group {
-  .vui-button {
-    z-index: 1;
-
-    &:hover {
-      z-index: 2;
-    }
-
-    &:not(:first-child, :last-child) {
-      border-radius: 0;
-    }
-
-    &:first-child {
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-    }
-
-    &:last-child {
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
-    }
-
-    &:not(:last-child) {
-      margin-right: -1px;
-    }
-  }
-
-  &.vertical {
-    .vui-button {
-      width: 100%;
-
-      &:not(:first-child, :last-child) {
-        border-radius: 0;
-      }
-
-      &:first-child {
-        border-bottom-left-radius: 0;
-        border-bottom-right-radius: 0;
-      }
-
-      &:last-child {
-        border-top-left-radius: 0;
-        border-top-right-radius: 0;
-      }
-
-      &:not(:last-child) {
-        margin-bottom: -1px;
-      }
-    }
-  }
-}
+.vui-button-group {
+  .vui-button {
+    z-index: 1;
+
+    &:hover {
+      z-index: 2;
+    }
+
+    &:not(:first-child, :last-child) {
+      border-radius: 0;
+    }
+
+    &:first-child {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+
+    &:last-child {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+
+    &:not(:last-child) {
+      margin-right: -1px;
+    }
+  }
+
+  &.vertical {
+    .vui-button {
+      width: 100%;
+
+      &:not(:first-child, :last-child) {
+        border-radius: 0;
+      }
+
+      &:first-child {
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+
+      &:last-child {
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+      }
+
+      &:not(:last-child) {
+        margin-bottom: -1px;
+      }
+    }
+  }
+}

package/src/components/Calendar/Calendar.vue

@@ -1,60 +1,63 @@
-<script setup lang='ts'>
-import type { VueDatePickerProps } from '@vuepic/vue-datepicker'
-import { Icon } from '@iconify/vue'
-import VueDatePicker from '@vuepic/vue-datepicker'
-import '@vuepic/vue-datepicker/dist/main.css'
-import './calendar.scss'
-
-const props = withDefaults(defineProps<VueDatePickerProps & {
-  expand?: boolean
-}>(), {
-  autoApply: true,
-  autoPosition: true,
-  dark: true,
-  format: 'dd/MM/yyyy HH:mm',
-  expand: false,
-})
-
-const ICON_SIZE = 18
-</script>
-
-<template>
-  <VueDatePicker
-    v-bind="props"
-    :style="props.expand || !$slots.trigger
-      ? undefined
-      : { display: 'inline-block', width: 'auto' }
-    "
-  >
-    <!-- Icon slots -->
-    <template #input-icon>
-      <Icon :width="ICON_SIZE" :height="ICON_SIZE" icon="ph:calendar-blank" />
-    </template>
-    <template #calendar-icon>
-      <Icon :width="ICON_SIZE" :height="ICON_SIZE" icon="ph:calendar-blank" />
-    </template>
-    <template #clear-icon>
-      <Icon :width="ICON_SIZE" :height="ICON_SIZE" icon="ph:x" />
-    </template>
-    <template #clock-icon>
-      <Icon :width="ICON_SIZE" :height="ICON_SIZE" icon="ph:clock" />
-    </template>
-    <template #arrow-left>
-      <Icon :width="ICON_SIZE" :height="ICON_SIZE" icon="ph:caret-left" />
-    </template>
-    <template #arrow-right>
-      <Icon :width="ICON_SIZE" :height="ICON_SIZE" icon="ph:caret-right" />
-    </template>
-    <template #arrow-up>
-      <Icon :width="ICON_SIZE" :height="ICON_SIZE" icon="ph:caret-up" />
-    </template>
-    <template #arrow-down>
-      <Icon :width="ICON_SIZE" :height="ICON_SIZE" icon="ph:caret-down" />
-    </template>
-
-    <!-- Content slots -->
-    <template v-if="$slots.trigger" #trigger>
-      <slot name="trigger" />
-    </template>
-  </VueDatePicker>
-</template>
+<script setup lang='ts'>
+import type { VueDatePickerProps } from '@vuepic/vue-datepicker'
+import { Icon } from '@iconify/vue'
+import VueDatePicker from '@vuepic/vue-datepicker'
+import { useAttrs } from 'vue'
+import '@vuepic/vue-datepicker/dist/main.css'
+import './calendar.scss'
+
+const props = withDefaults(defineProps<VueDatePickerProps & {
+  expand?: boolean
+}>(), {
+  autoApply: true,
+  autoPosition: true,
+  dark: true,
+  format: 'dd/MM/yyyy HH:mm',
+  expand: false,
+})
+
+const ICON_SIZE = 18
+const attrs = useAttrs()
+</script>
+
+<template>
+  <VueDatePicker
+    v-bind="{ ...props, ...attrs }"
+    class="vui-calendar"
+    :style="props.expand ?? !$slots.trigger
+      ? undefined
+      : { display: 'inline-block', width: 'auto' }
+    "
+  >
+    <!-- Icon slots -->
+    <template #input-icon>
+      <Icon :width="ICON_SIZE" :height="ICON_SIZE" icon="ph:calendar-blank" />
+    </template>
+    <template #calendar-icon>
+      <Icon :width="ICON_SIZE" :height="ICON_SIZE" icon="ph:calendar-blank" />
+    </template>
+    <template #clear-icon>
+      <Icon :width="ICON_SIZE" :height="ICON_SIZE" icon="ph:x" />
+    </template>
+    <template #clock-icon>
+      <Icon :width="ICON_SIZE" :height="ICON_SIZE" icon="ph:clock" />
+    </template>
+    <template #arrow-left>
+      <Icon :width="ICON_SIZE" :height="ICON_SIZE" icon="ph:caret-left" />
+    </template>
+    <template #arrow-right>
+      <Icon :width="ICON_SIZE" :height="ICON_SIZE" icon="ph:caret-right" />
+    </template>
+    <template #arrow-up>
+      <Icon :width="ICON_SIZE" :height="ICON_SIZE" icon="ph:caret-up" />
+    </template>
+    <template #arrow-down>
+      <Icon :width="ICON_SIZE" :height="ICON_SIZE" icon="ph:caret-down" />
+    </template>
+
+    <!-- Content slots -->
+    <template v-if="$slots.trigger" #trigger>
+      <slot name="trigger" />
+    </template>
+  </VueDatePicker>
+</template>

package/src/components/Calendar/calendar.scss

@@ -1,56 +1,60 @@
-.dp__theme_dark {
-  --dp-background-color: var(--color-bg);
-  --dp-text-color: var(--color-text);
-  --dp-hover-color: var(--color-button-gray-hover);
-  --dp-hover-text-color: var(--color-text);
-  --dp-hover-icon-color: var(--color-text-lighter);
-  --dp-primary-color: var(--color-accent);
-  --dp-primary-disabled-color: var(--color-accent-disabled);
-  --dp-primary-text-color: var(--color-text-invert);
-  --dp-secondary-color: var(--color-border);
-  --dp-border-color: var(--color-border);
-  --dp-menu-border-color: var(--color-border);
-  --dp-border-color-hover: var(--color-border-strong);
-  --dp-border-color-focus: var(--color-border-strong);
-  --dp-disabled-color: var(--color-bg-raised);
-  --dp-disabled-color-text: var(--color-text-light);
-  --dp-scroll-bar-background: var(--color-bg-lowered);
-  --dp-scroll-bar-color: var(--color-border);
-  --dp-success-color: var(--color-green);
-  --dp-success-color-disabled: var(--color-green-disabled);
-  --dp-icon-color: var(--color-text-light);
-  --dp-danger-color: var(--color-red);
-  --dp-marker-color: var(--color-red);
-  --dp-tooltip-color: var(--color-bg-raised);
-  --dp-highlight-color: var(--color-bg-raised);
-  --dp-range-between-dates-background-color: var(--dp-hover-color, #484848);
-  --dp-range-between-dates-text-color: var(--dp-hover-text-color, #fff);
-  --dp-range-between-border-color: var(--dp-hover-color, #fff);
-}
-
-:root {
-  --dp-font-family: var(--global-font);
-  --dp-border-radius: var(--border-radius-s);
-  --dp-cell-border-radius: var(--border-radius-s);
-  --dp-common-transition: var(--transition);
-
-  --dp-font-size: var(--font-size-ms);
-  --dp-preview-font-size: var(--font-size-s);
-  --dp-time-font-size: var(--font-size-s);
-}
-
-.dp__main {
-  font-size: var(--n-font-size-m);
-}
-
-.dp__outer_menu_wrap {
-  box-shadow: var(--box-shadow-strong);
-}
-
-.dp__input_icon {
-  inset-inline-start: 8px;
-}
-
-.dp--clear-btn {
-  inset-inline-end: 8px;
-}
+.dp__theme_dark {
+  --dp-background-color: var(--color-bg);
+  --dp-text-color: var(--color-text);
+  --dp-hover-color: var(--color-button-gray-hover);
+  --dp-hover-text-color: var(--color-text);
+  --dp-hover-icon-color: var(--color-text-lighter);
+  --dp-primary-color: var(--color-accent);
+  --dp-primary-disabled-color: var(--color-accent-disabled);
+  --dp-primary-text-color: var(--color-text-invert);
+  --dp-secondary-color: var(--color-border);
+  --dp-border-color: var(--color-border);
+  --dp-menu-border-color: var(--color-border);
+  --dp-border-color-hover: var(--color-border-strong);
+  --dp-border-color-focus: var(--color-border-strong);
+  --dp-disabled-color: var(--color-bg-raised);
+  --dp-disabled-color-text: var(--color-text-light);
+  --dp-scroll-bar-background: var(--color-bg-lowered);
+  --dp-scroll-bar-color: var(--color-border);
+  --dp-success-color: var(--color-green);
+  --dp-success-color-disabled: var(--color-green-disabled);
+  --dp-icon-color: var(--color-text-light);
+  --dp-danger-color: var(--color-red);
+  --dp-marker-color: var(--color-red);
+  --dp-tooltip-color: var(--color-bg-raised);
+  --dp-highlight-color: var(--color-bg-raised);
+  --dp-range-between-dates-background-color: var(--dp-hover-color, #484848);
+  --dp-range-between-dates-text-color: var(--dp-hover-text-color, #fff);
+  --dp-range-between-border-color: var(--dp-hover-color, #fff);
+}
+
+:root {
+  --dp-font-family: var(--global-font);
+  --dp-border-radius: var(--border-radius-s);
+  --dp-cell-border-radius: var(--border-radius-s);
+  --dp-common-transition: var(--transition);
+
+  --dp-font-size: var(--font-size-ms);
+  --dp-preview-font-size: var(--font-size-s);
+  --dp-time-font-size: var(--font-size-s);
+}
+
+.dp__main {
+  font-size: var(--n-font-size-m);
+}
+
+.dp__outer_menu_wrap {
+  box-shadow: var(--box-shadow-strong);
+}
+
+.dp__input_icon {
+  inset-inline-start: 8px;
+}
+
+.dp--clear-btn {
+  inset-inline-end: 8px;
+}
+
+.dp__input {
+  height: var(--interactive-el-height);
+}

package/src/components/Card/Card.vue

@@ -1,48 +1,48 @@
-<script setup lang="ts">
-import Divider from '../Divider/Divider.vue'
-import './card.scss'
-
-export interface Props {
-  separators?: boolean
-  headerSeparator?: boolean
-  footerSeparator?: boolean
-  padding?: boolean
-}
-
-const {
-  padding = true,
-  separators,
-  headerSeparator,
-  footerSeparator,
-} = defineProps<Props>()
-</script>
-
-<template>
-  <div
-    class="vui-card" :class="{
-      separators,
-      'header-separator': headerSeparator,
-      'footer-separator': footerSeparator,
-      'no-padding': !padding,
-    }"
-  >
-    <div v-if="$slots.header || $slots['header-end']" class="vui-card-header">
-      <div>
-        <slot name="header" />
-      </div>
-      <slot name="header-end" />
-    </div>
-
-    <Divider v-if="(separators || headerSeparator) && ($slots.header || $slots['header-end'])" :space="1" />
-
-    <div v-if="$slots.default" class="vui-card-content">
-      <slot />
-    </div>
-
-    <Divider v-if="(separators || footerSeparator) && $slots.footer" :space="1" />
-
-    <div v-if="$slots.footer" class="vui-card-footer">
-      <slot name="footer" />
-    </div>
-  </div>
-</template>
+<script setup lang="ts">
+import Divider from '../Divider/Divider.vue'
+import './card.scss'
+
+export interface Props {
+  separators?: boolean
+  headerSeparator?: boolean
+  footerSeparator?: boolean
+  padding?: boolean
+}
+
+const {
+  padding = true,
+  separators,
+  headerSeparator,
+  footerSeparator,
+} = defineProps<Props>()
+</script>
+
+<template>
+  <div
+    class="vui-card" :class="{
+      separators,
+      'header-separator': headerSeparator,
+      'footer-separator': footerSeparator,
+      'no-padding': !padding,
+    }"
+  >
+    <div v-if="$slots.header || $slots['header-end']" class="vui-card-header">
+      <div>
+        <slot name="header" />
+      </div>
+      <slot name="header-end" />
+    </div>
+
+    <Divider v-if="(separators || headerSeparator) && ($slots.header || $slots['header-end'])" :space="1" />
+
+    <div v-if="$slots.default" class="vui-card-content">
+      <slot />
+    </div>
+
+    <Divider v-if="(separators || footerSeparator) && $slots.footer" :space="1" />
+
+    <div v-if="$slots.footer" class="vui-card-footer">
+      <slot name="footer" />
+    </div>
+  </div>
+</template>

package/src/components/Card/card.scss

@@ -1,53 +1,53 @@
-.vui-card {
-  background-color: var(--color-bg);
-  border-radius: var(--border-radius-m);
-  border: 1px solid var(--color-border);
-
-  &.no-padding {
-    .vui-card-header,
-    .vui-card-content,
-    .vui-card-footer {
-      padding: 0;
-    }
-  }
-
-  &:not(.separators) {
-    .vui-card-content:not(:first-child) {
-      padding-block: var(--space-xs);
-    }
-
-    &.header-separator {
-      .vui-card-content:not(:first-child) {
-        padding-top: var(--space-m);
-        // padding-block: var(--space-m);
-      }
-    }
-
-    &.footer-separator {
-      .vui-card-content {
-        padding-bottom: var(--space-m);
-      }
-    }
-  }
-
-  .vui-card-header {
-    display: flex;
-    align-items: flex-start;
-    justify-content: space-between;
-    padding: var(--space-s) var(--space-m);
-    background-color: var(--color-bg);
-    border-top-left-radius: var(--border-radius-m);
-    border-top-right-radius: var(--border-radius-m);
-  }
-
-  .vui-card-content {
-    padding: var(--space-m);
-  }
-
-  .vui-card-footer {
-    padding: var(--space-s) var(--space-m);
-    background-color: var(--color-bg);
-    border-bottom-left-radius: var(--border-radius-m);
-    border-bottom-right-radius: var(--border-radius-m);
-  }
-}
+.vui-card {
+  background-color: var(--color-bg);
+  border-radius: var(--border-radius-m);
+  border: 1px solid var(--color-border);
+
+  &.no-padding {
+    .vui-card-header,
+    .vui-card-content,
+    .vui-card-footer {
+      padding: 0;
+    }
+  }
+
+  &:not(.separators) {
+    .vui-card-content:not(:first-child) {
+      padding-block: var(--space-xs);
+    }
+
+    &.header-separator {
+      .vui-card-content:not(:first-child) {
+        padding-top: var(--space-m);
+        // padding-block: var(--space-m);
+      }
+    }
+
+    &.footer-separator {
+      .vui-card-content {
+        padding-bottom: var(--space-m);
+      }
+    }
+  }
+
+  .vui-card-header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    padding: var(--space-s) var(--space-m);
+    background-color: var(--color-bg);
+    border-top-left-radius: var(--border-radius-m);
+    border-top-right-radius: var(--border-radius-m);
+  }
+
+  .vui-card-content {
+    padding: var(--space-m);
+  }
+
+  .vui-card-footer {
+    padding: var(--space-s) var(--space-m);
+    background-color: var(--color-bg);
+    border-bottom-left-radius: var(--border-radius-m);
+    border-bottom-right-radius: var(--border-radius-m);
+  }
+}