@dolanske/vui 1.4.0 → 1.4.2

package/src/components/ButtonGroup/ButtonGroup.vue

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

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

@@ -1,51 +0,0 @@
-.vui-button-group {
-  .vui-button {
-    z-index: var(--z-default);
-
-    &:hover {
-      z-index: var(--z-active);
-    }
-
-    &: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: 0px;
-    }
-  }
-
-  &.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: 0px;
-      }
-    }
-  }
-}

package/src/components/Calendar/Calendar.vue

@@ -1,66 +0,0 @@
-<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 { theme } from '../../shared/theme'
-import '@vuepic/vue-datepicker/dist/main.css'
-import './calendar.scss'
-
-const props = withDefaults(defineProps<VueDatePickerProps & {
-  expand?: boolean
-}>(), {
-  autoApply: true,
-  autoPosition: true,
-  format: 'dd/MM/yyyy HH:mm',
-  monthNameFormat: 'long',
-  expand: false,
-})
-
-const ICON_SIZE = 18
-const attrs = useAttrs()
-</script>
-
-<template>
-  <VueDatePicker
-    v-bind="{ ...props, ...attrs }"
-    class="vui-calendar"
-    :class="{ 'vui-calendar-inline': props.inline }"
-    :style="props.expand ?? !$slots.trigger
-      ? undefined
-      : { display: 'inline-block', width: 'auto' }
-    "
-    :dark="theme === 'dark'"
-  >
-    <!-- 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,88 +0,0 @@
-.dp__theme_light,
-.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);
-}
-
-// TODO: dp theme light
-
-.dp__theme_light {
-  --dp-primary-text-color: var(--color-text);
-}
-
-: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-m);
-  --dp-preview-font-size: var(--font-size-s);
-  --dp-time-font-size: var(--font-size-s);
-}
-
-.vui-calendar-inline {
-  .dp__outer_menu_wrap {
-    box-shadow: none;
-  }
-
-  .dp__menu {
-    border: none;
-  }
-}
-
-.dp__overlay_cell_pad {
-  font-size: var(--font-size-m);
-  text-transform: capitalize;
-  font-weight: var(--font-weight-medium);
-}
-
-.dp__main {
-  font-size: var(--font-size-m);
-  font-weight: var(--font-weight);
-}
-
-.dp__btn {
-  font-weight: var(--font-medium);
-}
-
-.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 +0,0 @@
-<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 class="flex-1">
-        <slot name="header" />
-      </div>
-      <slot name="header-end" />
-    </div>
-
-    <Divider v-if="(separators || headerSeparator) && ($slots.header || $slots['header-end'])" :size="1" />
-
-    <div v-if="$slots.default" class="vui-card-content">
-      <slot />
-    </div>
-
-    <Divider v-if="(separators || footerSeparator) && $slots.footer" :size="1" />
-
-    <div v-if="$slots.footer" class="vui-card-footer">
-      <slot name="footer" />
-    </div>
-  </div>
-</template>

package/src/components/Card/card.scss

@@ -1,55 +0,0 @@
-.vui-card {
-  display: block;
-  width: 100%;
-  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) {
-    // &:not(.header-separator) .vui-card-content:first-child {
-    //   padding-bottom: 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: center;
-    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);
-  }
-}

package/src/components/Checkbox/Checkbox.vue

@@ -1,54 +0,0 @@
-<script setup lang="ts">
-import { Icon } from '@iconify/vue'
-import { useId } from 'vue'
-import './checkbox.scss'
-
-interface Props {
-  label?: string
-  iconOn?: string
-  iconOff?: string
-  disabled?: boolean
-  checked?: boolean
-  accent?: boolean
-}
-
-const {
-  label,
-  // iconOn = theme.value === 'light' ? 'ph:check-square-fill' : 'ph:check-square',
-  iconOn = 'ph:check-square-fill',
-  iconOff = 'ph:square',
-  disabled,
-  checked: checkedProp,
-  accent,
-} = defineProps<Props>()
-const emit = defineEmits<{
-  change: [checked: boolean]
-}>()
-const slots = defineSlots()
-const checked = defineModel<boolean>()
-const id = useId()
-</script>
-
-<template>
-  <div class="vui-checkbox" :class="{ disabled: !!disabled, checked, accent }">
-    <input
-      :id
-      v-model="checked"
-      type="checkbox"
-      :disabled
-      :checked="checkedProp"
-      @change="(e) => {
-        if (disabled) return
-        emit('change', (e.target as HTMLInputElement).checked)
-      }"
-    >
-    <label :for="id">
-      <span class="vui-checkbox-icon">
-        <Icon :icon="checked ? iconOn : iconOff" />
-      </span>
-      <p v-if="label || slots.default" class="vui-checkbox-content">
-        <slot>{{ label }}</slot>
-      </p>
-    </label>
-  </div>
-</template>

package/src/components/Checkbox/checkbox.scss

@@ -1,80 +0,0 @@
-.vui-checkbox {
-  --checkbox-size: 24px;
-
-  &.checked {
-    .vui-checkbox-icon svg {
-      color: var(--color-text);
-    }
-
-    &.accent .vui-checkbox-icon svg {
-      color: var(--color-accent);
-    }
-  }
-
-  &.disabled {
-    .vui-checkbox-icon {
-      opacity: 0.25;
-      cursor: not-allowed;
-    }
-
-    input + label .vui-checkbox-content {
-      opacity: 0.4;
-      cursor: not-allowed;
-    }
-  }
-
-  .vui-checkbox-icon {
-    width: var(--checkbox-size);
-    height: var(--checkbox-size);
-
-    svg {
-      width: 100%;
-      height: 100%;
-      color: var(--color-text);
-    }
-  }
-
-  input {
-    width: 1px;
-    height: 1px;
-    position: absolute;
-    overflow: hidden;
-    outline: none !important;
-    opacity: 0;
-
-    &:focus-visible + label .vui-checkbox-icon {
-      outline: 2px solid var(--color-text);
-      border-radius: var(--border-radius-s);
-      cursor: default;
-    }
-
-    & + label {
-      display: grid;
-      grid-template-columns: 20px 1fr;
-      gap: 10px;
-      font-size: var(--font-size-m);
-      color: var(--color-text);
-      user-select: none;
-      align-items: baseline;
-
-      .vui-checkbox-content {
-        display: block;
-
-        &:is(p) {
-          display: flex;
-          align-items: center;
-          min-height: var(--checkbox-size);
-          font-size: var(--font-size-m);
-          align-self: flex-start;
-          // line-height: var(--checkbox-size);
-        }
-      }
-    }
-  }
-}
-
-:root.light {
-  .vui-checkbox.checked.accent .vui-checkbox-icon svg {
-    color: var(--color-accent);
-  }
-}

package/src/components/CopyClipboard/CopyClipboard.vue

@@ -1,98 +0,0 @@
-<script setup lang='ts'>
-import type { Placement } from '@floating-ui/vue'
-import { autoUpdate, flip, offset, shift, useFloating } from '@floating-ui/vue'
-import { Icon } from '@iconify/vue'
-import { useClipboard } from '@vueuse/core'
-import { computed, onMounted, useSlots, useTemplateRef } from 'vue'
-import { getPlacementAnimationName, isNil } from '../../shared/helpers'
-import Flex from '../Flex/Flex.vue'
-import './copy-clipboard.scss'
-
-interface Props {
-  /**
-   * Text to copy
-   */
-  text: string
-  /**
-   * Wether to show a tooltip after successful copy
-   */
-  confirm?: string | boolean
-  /**
-   * How long will the copy confirmation tooltip be visible in milliseconds.
-   */
-  confirmTime?: number
-  /**
-   * Tooltip position. Default is top
-   */
-  confirmPlacement?: Placement
-}
-
-const {
-  text,
-  confirm,
-  confirmTime,
-  confirmPlacement = 'top',
-} = defineProps<Props>()
-
-const {
-  copy,
-  copied,
-  isSupported,
-} = useClipboard({
-  copiedDuring: confirmTime,
-})
-const slots = useSlots()
-
-const parsedConfirm = computed(() => {
-  if (isNil(confirm))
-    return false
-  if (confirm === '')
-    return true
-  else return confirm
-})
-
-onMounted(() => {
-  if (!isSupported.value) {
-    console.error('Clipboard API is not supported. This component will not work')
-  }
-
-  if (typeof parsedConfirm.value === 'string' && slots.confirm) {
-    console.warn('[ClipBoard] You are using the \'confirm\' prop and slot. The slot will take precedence.')
-  }
-})
-
-const anchorRef = useTemplateRef('anchor')
-const tooltipRef = useTemplateRef('tooltip')
-
-const { floatingStyles } = useFloating(anchorRef, tooltipRef, {
-  whileElementsMounted: autoUpdate,
-  transform: false,
-  strategy: 'fixed',
-  placement: confirmPlacement,
-  middleware: [
-    offset(8),
-    shift(),
-    flip(),
-  ],
-})
-</script>
-
-<template>
-  <div ref="anchor" class="vui-clipboard-copy-wrap" role="button" @click="copy(text)">
-    <slot :copy :copied />
-  </div>
-
-  <Transition :name="getPlacementAnimationName(confirmPlacement)" mode="in-out">
-    <div v-if="copied && (!!parsedConfirm || $slots.confirm)" ref="tooltip" class="vui-clipboard-tooltip" :style="floatingStyles">
-      <slot name="confirm">
-        <template v-if="typeof parsedConfirm === 'string'">
-          {{ parsedConfirm }}
-        </template>
-        <Flex v-else y-center x-center>
-          <Icon width="16" height="16" icon="ph:check-bold" />
-          Copied to clipboard
-        </Flex>
-      </slot>
-    </div>
-  </Transition>
-</template>

package/src/components/CopyClipboard/copy-clipboard.scss

@@ -1,25 +0,0 @@
-.vui-clipboard-copy-wrap {
-  display: inline-block;
-  position: relative;
-}
-
-.vui-clipboard-tooltip {
-  padding: 6px 8px;
-  border-radius: var(--border-radius-s);
-  background-color: var(--color-bg-raised);
-  font-size: var(--font-size-m);
-  color: var(--color-text);
-  box-shadow: var(--box-shadow);
-  z-index: var(--z-popout);
-
-  svg path {
-    color: var(--color-text);
-  }
-}
-
-:root.light {
-  .vui-clipboard-tooltip {
-    background-color: var(--color-bg);
-    box-shadow: var(--box-shadow-strong);
-  }
-}

package/src/components/Divider/Divider.vue

@@ -1,38 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import { formatUnitValue } from '../../shared/helpers'
-import './divider.scss'
-
-interface Props {
-  thickness?: number
-  size?: number | string
-  vertical?: boolean
-  margin?: string | number
-}
-
-const {
-  thickness = 1,
-  size = 32,
-  vertical,
-  margin = '0',
-} = defineProps<Props>()
-
-const h = computed(() => formatUnitValue(size))
-const w = computed(() => vertical ? h.value : 'initial')
-const m = computed(() => formatUnitValue(margin))
-</script>
-
-<template>
-  <div
-    class="vui-divider" :class="{ vertical }" :style="{
-      margin: m,
-      width: w,
-      height: h,
-    }"
-  >
-    <hr :style="{ [vertical ? 'borderRightWidth' : 'borderBottomWidth']: `${thickness}px` }">
-    <div v-if="$slots.default" class="vui-divider-slot">
-      <slot />
-    </div>
-  </div>
-</template>

package/src/components/Divider/divider.scss

@@ -1,37 +0,0 @@
-.vui-divider {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  height: 32px;
-  width: 100%;
-
-  &.vertical hr {
-    transform: translateX(-50%);
-    width: 1px;
-    height: 100%;
-    border-right-color: var(--color-border);
-    border-right-style: solid;
-  }
-
-  hr {
-    display: block;
-    transform: translateY(-50%);
-    width: 100%;
-    height: 1px;
-    border: none;
-    border-bottom-color: var(--color-border);
-    border-bottom-style: solid;
-  }
-
-  .vui-divider-slot {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-
-    & > *:first-child {
-      outline: 3px solid var(--color-bg);
-    }
-  }
-}