@dolanske/vui 1.0.1 → 1.0.3

package/src/components/Spinner/spinner.scss

@@ -1,47 +1,47 @@
-.vui-spinner {
-  --spinner-color: var(--color-border-accent);
-
-  aspect-ratio: 1;
-  border-radius: 50%;
-  border: 3px solid var(--spinner-color);
-  animation:
-    l20-1 0.8s infinite linear alternate,
-    l20-2 1.6s infinite linear;
-}
-@keyframes l20-1 {
-  0% {
-    clip-path: polygon(50% 50%, 0 0, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%);
-  }
-  12.5% {
-    clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0%);
-  }
-  25% {
-    clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 100%, 100% 100%, 100% 100%);
-  }
-  50% {
-    clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%);
-  }
-  62.5% {
-    clip-path: polygon(50% 50%, 100% 0, 100% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%);
-  }
-  75% {
-    clip-path: polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 50% 100%, 0% 100%);
-  }
-  100% {
-    clip-path: polygon(50% 50%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 0% 100%);
-  }
-}
-@keyframes l20-2 {
-  0% {
-    transform: scaleY(1) rotate(0deg);
-  }
-  49.99% {
-    transform: scaleY(1) rotate(135deg);
-  }
-  50% {
-    transform: scaleY(-1) rotate(0deg);
-  }
-  100% {
-    transform: scaleY(-1) rotate(-135deg);
-  }
-}
+.vui-spinner {
+  --spinner-color: var(--color-border-accent);
+
+  aspect-ratio: 1;
+  border-radius: 50%;
+  border: 3px solid var(--spinner-color);
+  animation:
+    l20-1 0.8s infinite linear alternate,
+    l20-2 1.6s infinite linear;
+}
+@keyframes l20-1 {
+  0% {
+    clip-path: polygon(50% 50%, 0 0, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%);
+  }
+  12.5% {
+    clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0%);
+  }
+  25% {
+    clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 100%, 100% 100%, 100% 100%);
+  }
+  50% {
+    clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%);
+  }
+  62.5% {
+    clip-path: polygon(50% 50%, 100% 0, 100% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%);
+  }
+  75% {
+    clip-path: polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 50% 100%, 0% 100%);
+  }
+  100% {
+    clip-path: polygon(50% 50%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 0% 100%);
+  }
+}
+@keyframes l20-2 {
+  0% {
+    transform: scaleY(1) rotate(0deg);
+  }
+  49.99% {
+    transform: scaleY(1) rotate(135deg);
+  }
+  50% {
+    transform: scaleY(-1) rotate(0deg);
+  }
+  100% {
+    transform: scaleY(-1) rotate(-135deg);
+  }
+}

package/src/components/Switch/Switch.vue

@@ -1,31 +1,31 @@
-<script setup lang="ts">
-import { useId } from 'vue'
-import './switch.scss'
-
-interface Props {
-  label?: string
-  disabled?: boolean
-  accent?: boolean
-}
-
-const { label, disabled, accent } = defineProps<Props>()
-const slots = defineSlots()
-const checked = defineModel<boolean>()
-const id = useId()
-</script>
-
-<template>
-  <div class="vui-switch" :class="{ disabled, checked, accent }">
-    <input :id v-model="checked" type="checkbox" :disabled>
-    <label :for="id">
-      <div class="vui-switch-icon">
-        <span class="vui-switch-indicator" />
-      </div>
-
-      <p v-if="!slots.default" class="vui-switch-content">{{ label }}</p>
-      <div v-else class="vui-switch-content">
-        <slot />
-      </div>
-    </label>
-  </div>
-</template>
+<script setup lang="ts">
+import { useId } from 'vue'
+import './switch.scss'
+
+interface Props {
+  label?: string
+  disabled?: boolean
+  accent?: boolean
+}
+
+const { label, disabled, accent } = defineProps<Props>()
+const slots = defineSlots()
+const checked = defineModel<boolean>()
+const id = useId()
+</script>
+
+<template>
+  <div class="vui-switch" :class="{ disabled, checked, accent }">
+    <input :id v-model="checked" type="checkbox" :disabled>
+    <label :for="id">
+      <div class="vui-switch-icon">
+        <span class="vui-switch-indicator" />
+      </div>
+
+      <p v-if="!slots.default" class="vui-switch-content">{{ label }}</p>
+      <div v-else class="vui-switch-content">
+        <slot />
+      </div>
+    </label>
+  </div>
+</template>

package/src/components/Switch/switch.scss

@@ -1,93 +1,93 @@
-.vui-switch {
-  --switch-size: 24px;
-
-  &.checked {
-    .vui-switch-icon .vui-switch-indicator {
-      left: calc(100% - 24px);
-      background-color: var(--color-text);
-    }
-
-    &.accent .vui-switch-icon .vui-switch-indicator {
-      background-color: var(--color-accent);
-    }
-  }
-
-  &.disabled {
-    .vui-switch-icon {
-      opacity: 0.5;
-      cursor: not-allowed;
-    }
-
-    input + label .vui-switch-content {
-      opacity: 0.5;
-      cursor: not-allowed;
-    }
-  }
-
-  .vui-switch-icon {
-    width: 44px;
-    height: var(--switch-size);
-    border-radius: 22px;
-    background-color: var(--color-bg-raised);
-    position: relative;
-    cursor: default;
-
-    .vui-switch-indicator {
-      display: block;
-      position: absolute;
-      left: 2px;
-      top: 2px;
-      width: 20px;
-      height: 20px;
-      border-radius: 100%;
-      background-color: var(--color-text-lighter);
-      transition: var(--transition);
-    }
-  }
-
-  input {
-    width: 1px;
-    height: 1px;
-    position: absolute;
-    overflow: hidden;
-    outline: none !important;
-    opacity: 0;
-
-    &:focus-visible + label .vui-switch-icon {
-      outline: 2px solid var(--color-text);
-    }
-
-    & + label {
-      display: grid;
-      grid-template-columns: 44px 1fr;
-      gap: 10px;
-      font-size: var(--font-size-m);
-      color: var(--color-text);
-      user-select: none;
-
-      .vui-switch-content {
-        display: block;
-
-        &:is(p) {
-          height: var(--switch-size);
-          line-height: var(--switch-size);
-          font-size: var(--font-size-m);
-        }
-      }
-    }
-  }
-}
-
-:root.light {
-  .vui-switch .vui-switch-icon .vui-switch-indicator {
-    background-color: var(--color-bg-lowered);
-  }
-
-  .vui-switch.checked.accent .vui-switch-icon .vui-switch-indicator {
-    background-color: var(--color-accent);
-  }
-
-  .vui-switch.checked .vui-switch-icon .vui-switch-indicator {
-    background-color: var(--color-text);
-  }
-}
+.vui-switch {
+  --switch-size: 24px;
+
+  &.checked {
+    .vui-switch-icon .vui-switch-indicator {
+      left: calc(100% - 24px);
+      background-color: var(--color-text);
+    }
+
+    &.accent .vui-switch-icon .vui-switch-indicator {
+      background-color: var(--color-accent);
+    }
+  }
+
+  &.disabled {
+    .vui-switch-icon {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    input + label .vui-switch-content {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+  }
+
+  .vui-switch-icon {
+    width: 44px;
+    height: var(--switch-size);
+    border-radius: 22px;
+    background-color: var(--color-bg-raised);
+    position: relative;
+    cursor: default;
+
+    .vui-switch-indicator {
+      display: block;
+      position: absolute;
+      left: 2px;
+      top: 2px;
+      width: 20px;
+      height: 20px;
+      border-radius: 100%;
+      background-color: var(--color-text-lighter);
+      transition: var(--transition);
+    }
+  }
+
+  input {
+    width: 1px;
+    height: 1px;
+    position: absolute;
+    overflow: hidden;
+    outline: none !important;
+    opacity: 0;
+
+    &:focus-visible + label .vui-switch-icon {
+      outline: 2px solid var(--color-text);
+    }
+
+    & + label {
+      display: grid;
+      grid-template-columns: 44px 1fr;
+      gap: 10px;
+      font-size: var(--font-size-m);
+      color: var(--color-text);
+      user-select: none;
+
+      .vui-switch-content {
+        display: block;
+
+        &:is(p) {
+          height: var(--switch-size);
+          line-height: var(--switch-size);
+          font-size: var(--font-size-m);
+        }
+      }
+    }
+  }
+}
+
+:root.light {
+  .vui-switch .vui-switch-icon .vui-switch-indicator {
+    background-color: var(--color-bg-lowered);
+  }
+
+  .vui-switch.checked.accent .vui-switch-icon .vui-switch-indicator {
+    background-color: var(--color-accent);
+  }
+
+  .vui-switch.checked .vui-switch-icon .vui-switch-indicator {
+    background-color: var(--color-text);
+  }
+}

package/src/components/Table/Cell.vue

@@ -1,23 +1,23 @@
-<script setup lang="ts">
-import { computed, useSlots, useTemplateRef } from 'vue'
-
-const slots = useSlots()
-const contextRef = useTemplateRef<HTMLTableCellElement>('context')
-const computedStyle = computed(() => {
-  if (!slots.context || !window)
-    return {}
-  const width = contextRef.value?.getBoundingClientRect().width ?? 0
-  return {
-    paddingRight: `${width}px`,
-  }
-})
-</script>
-
-<template>
-  <td :style="computedStyle">
-    <slot />
-    <div v-if="$slots.context" ref="context" class="vui-cell-context">
-      <slot name="context" />
-    </div>
-  </td>
-</template>
+<script setup lang="ts">
+import { computed, useSlots, useTemplateRef } from 'vue'
+
+const slots = useSlots()
+const contextRef = useTemplateRef<HTMLTableCellElement>('context')
+const computedStyle = computed(() => {
+  if (!slots.context || !window)
+    return {}
+  const width = contextRef.value?.getBoundingClientRect().width ?? 0
+  return {
+    paddingRight: `${width}px`,
+  }
+})
+</script>
+
+<template>
+  <td :style="computedStyle">
+    <slot />
+    <div v-if="$slots.context" ref="context" class="vui-cell-context">
+      <slot name="context" />
+    </div>
+  </td>
+</template>

package/src/components/Table/Head.vue

@@ -1,59 +1,59 @@
-<script setup lang="ts">
-import type { Header } from './table'
-import { computed } from 'vue'
-import Button from '../Button/Button.vue'
-
-interface Props {
-  /**
-   * Main header data. This can be empty in case we are just adding an empty
-   * padder. It is recommended to just use <th> instead, but this shouldn't fail
-   * anyway
-   */
-  header?: Header
-  /**
-   * Enable sorting on this column
-   */
-  sort?: boolean
-}
-
-const props = defineProps<Props>()
-
-const sortStateBind = computed(() => {
-  if (!props.header)
-    return
-  switch (props.header.sortKey) {
-    case 'asc': return {
-      'icon': 'ph:sort-ascending',
-      'data-title-top': 'Ascending',
-    }
-    case 'desc': return {
-      'icon': 'ph:sort-descending',
-      'data-title-top': 'Descending',
-    }
-    default: return {
-      'icon': 'ph:arrows-down-up',
-      'data-title-top': 'Sort column',
-    }
-  }
-})
-</script>
-
-<template>
-  <th>
-    <div v-if="props.header || $slots.default" class="vui-table-th-content">
-      <slot>
-        {{ props.header?.label }}
-      </slot>
-      <Button
-        v-if="props.sort && props.header"
-        class="vui-table-sort-button"
-        v-bind="sortStateBind"
-        size="s"
-        :plain="!!!props.header.sortKey"
-        square
-        variant="gray"
-        @click="props.header.sortToggle"
-      />
-    </div>
-  </th>
-</template>
+<script setup lang="ts">
+import type { Header } from './table'
+import { computed } from 'vue'
+import Button from '../Button/Button.vue'
+
+interface Props {
+  /**
+   * Main header data. This can be empty in case we are just adding an empty
+   * padder. It is recommended to just use <th> instead, but this shouldn't fail
+   * anyway
+   */
+  header?: Header
+  /**
+   * Enable sorting on this column
+   */
+  sort?: boolean
+}
+
+const props = defineProps<Props>()
+
+const sortStateBind = computed(() => {
+  if (!props.header)
+    return
+  switch (props.header.sortKey) {
+    case 'asc': return {
+      'icon': 'ph:sort-ascending',
+      'data-title-top': 'Ascending',
+    }
+    case 'desc': return {
+      'icon': 'ph:sort-descending',
+      'data-title-top': 'Descending',
+    }
+    default: return {
+      'icon': 'ph:arrows-down-up',
+      'data-title-top': 'Sort column',
+    }
+  }
+})
+</script>
+
+<template>
+  <th>
+    <div v-if="props.header || $slots.default" class="vui-table-th-content">
+      <slot>
+        {{ props.header?.label }}
+      </slot>
+      <Button
+        v-if="props.sort && props.header"
+        class="vui-table-sort-button"
+        v-bind="sortStateBind"
+        size="s"
+        :plain="!!!props.header.sortKey"
+        square
+        variant="gray"
+        @click="props.header.sortToggle"
+      />
+    </div>
+  </th>
+</template>

package/src/components/Table/Root.vue

@@ -1,66 +1,66 @@
-<script setup lang='ts'>
-import type { TableSelectionProvide } from './table'
-import { inject } from 'vue'
-import { TableSelectionProvideSymbol } from './table'
-import './table.scss'
-
-interface Props {
-  /**
-   * Sets the `table-layout` property
-   */
-  fixed?: boolean
-  /**
-   * Table cells with content overflowing on new line will be cropped
-   */
-  nowrap?: boolean
-  /**
-   * Add a visual separator between each row
-   */
-  separateRows?: boolean
-  /**
-   * Add a visual separator between each cell
-   */
-  separateCells?: boolean
-  /**
-   * Wrap table with a border
-   */
-  outerBorder?: boolean
-}
-
-const {
-  fixed,
-  nowrap,
-  separateRows = true,
-  separateCells = false,
-  outerBorder = true,
-} = defineProps<Props>()
-const selecting = inject(TableSelectionProvideSymbol) as TableSelectionProvide
-</script>
-
-<template>
-  <div
-    class="vui-table-container"
-    :class="{
-      fixed,
-      nowrap,
-      'selecting': selecting.enabled,
-      'separated-rows': separateRows,
-      'separated-cells': separateCells,
-      'outer-border': outerBorder,
-    }"
-  >
-    <table>
-      <thead v-if="$slots.header">
-        <tr>
-          <slot name="header" />
-        </tr>
-      </thead>
-      <tbody>
-        <slot name="body" />
-      </tbody>
-    </table>
-    <div v-if="$slots.pagination" class="vui-table-pagination-wrap">
-      <slot name="pagination" />
-    </div>
-  </div>
-</template>
+<script setup lang='ts'>
+import type { TableSelectionProvide } from './table'
+import { inject } from 'vue'
+import { TableSelectionProvideSymbol } from './table'
+import './table.scss'
+
+interface Props {
+  /**
+   * Sets the `table-layout` property
+   */
+  fixed?: boolean
+  /**
+   * Table cells with content overflowing on new line will be cropped
+   */
+  nowrap?: boolean
+  /**
+   * Add a visual separator between each row
+   */
+  separateRows?: boolean
+  /**
+   * Add a visual separator between each cell
+   */
+  separateCells?: boolean
+  /**
+   * Wrap table with a border
+   */
+  outerBorder?: boolean
+}
+
+const {
+  fixed,
+  nowrap,
+  separateRows = true,
+  separateCells = false,
+  outerBorder = true,
+} = defineProps<Props>()
+const selecting = inject(TableSelectionProvideSymbol) as TableSelectionProvide
+</script>
+
+<template>
+  <div
+    class="vui-table-container"
+    :class="{
+      fixed,
+      nowrap,
+      'selecting': selecting.enabled,
+      'separated-rows': separateRows,
+      'separated-cells': separateCells,
+      'outer-border': outerBorder,
+    }"
+  >
+    <table>
+      <thead v-if="$slots.header">
+        <tr>
+          <slot name="header" />
+        </tr>
+      </thead>
+      <tbody>
+        <slot name="body" />
+      </tbody>
+    </table>
+    <div v-if="$slots.pagination" class="vui-table-pagination-wrap">
+      <slot name="pagination" />
+    </div>
+  </div>
+</template>