@dolanske/vui 1.0.4 → 1.1.1

package/src/components/Accordion/accordion.scss

@@ -1,82 +1,82 @@
-.vui-accordion {
-  width: 100%;
-  transition: var(--transition);
-  border-bottom: 1px solid var(--color-border);
-  padding-bottom: 0;
-
-  &.is-card {
-    border: 1px solid var(--color-border);
-    border-radius: var(--border-radius-m);
-
-    &.open {
-      padding-bottom: 0;
-
-      .vui-accordion-header {
-        border-block-width: 1px;
-        border-bottom-left-radius: 0;
-        border-bottom-right-radius: 0;
-      }
-    }
-
-    .vui-accordion-header {
-      padding-inline: var(--space-m);
-      border-bottom: 0px solid var(--color-border);
-      text-decoration: inherit;
-      border-radius: var(--border-radius-m);
-
-      &:hover {
-        text-decoration: inherit;
-        text-underline-offset: inherit;
-        background-color: var(--color-button-gray);
-      }
-    }
-
-    .vui-accordtion-content-inner {
-      padding: var(--space-m);
-    }
-  }
-
-  &.open {
-    padding-bottom: var(--space-m);
-
-    .vui-accordion-header svg {
-      transform: rotate(180deg);
-    }
-
-    .vui-accordion-content {
-      visibility: visible;
-    }
-  }
-
-  .vui-accordion-header {
-    display: flex;
-    width: 100%;
-    justify-content: space-between;
-    align-items: center;
-    padding: var(--space-m) 0;
-    color: pointer;
-    font-size: var(--font-size-m);
-    font-weight: 500;
-    color: var(--color-text);
-    border-radius: var(--border-radius-m);
-
-    &:hover {
-      text-decoration: underline;
-      text-underline-offset: 4px;
-    }
-
-    svg {
-      transition: var(--transition);
-      color: var(--color-text-light);
-    }
-  }
-
-  .vui-accordion-content {
-    transition: var(--transition-slow);
-    width: 100%;
-    max-height: 0;
-    overflow: hidden;
-    visibility: hidden;
-    font-size: var(--font-size-m);
-  }
-}
+.vui-accordion {
+  width: 100%;
+  transition: var(--transition);
+  border-bottom: 1px solid var(--color-border);
+  padding-bottom: 0;
+
+  &.is-card {
+    border: 1px solid var(--color-border);
+    border-radius: var(--border-radius-m);
+
+    &.open {
+      padding-bottom: 0;
+
+      .vui-accordion-header {
+        border-block-width: 1px;
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+    }
+
+    .vui-accordion-header {
+      padding-inline: var(--space-m);
+      border-bottom: 0px solid var(--color-border);
+      text-decoration: inherit;
+      border-radius: var(--border-radius-m);
+
+      &:hover {
+        text-decoration: inherit;
+        text-underline-offset: inherit;
+        background-color: var(--color-button-gray);
+      }
+    }
+
+    .vui-accordtion-content-inner {
+      padding: var(--space-m);
+    }
+  }
+
+  &.open {
+    padding-bottom: var(--space-m);
+
+    .vui-accordion-header svg {
+      transform: rotate(180deg);
+    }
+
+    .vui-accordion-content {
+      visibility: visible;
+    }
+  }
+
+  .vui-accordion-header {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+    align-items: center;
+    padding: var(--space-m) 0;
+    color: pointer;
+    font-size: var(--font-size-m);
+    font-weight: 500;
+    color: var(--color-text);
+    border-radius: var(--border-radius-m);
+
+    &:hover {
+      text-decoration: underline;
+      text-underline-offset: 4px;
+    }
+
+    svg {
+      transition: var(--transition);
+      color: var(--color-text-light);
+    }
+  }
+
+  .vui-accordion-content {
+    transition: var(--transition-slow);
+    width: 100%;
+    max-height: 0;
+    overflow: hidden;
+    visibility: hidden;
+    font-size: var(--font-size-m);
+  }
+}

package/src/components/Alert/Alert.vue

@@ -1,59 +1,59 @@
-<script setup lang="ts">
-import { Icon } from '@iconify/vue'
-import { computed } from 'vue'
-import './alert.scss'
-
-interface Props {
-  variant?: 'neutral' | 'info' | 'success' | 'warning' | 'danger'
-  /**
-   * Override the variant's default icon
-   */
-  icon?: string
-  /**
-   * Setting a title and description will use slightly different styling other
-   * than slots.
-   */
-  title?: string
-  /**
-   * Use strong color
-   */
-  filled?: boolean
-  description?: string
-}
-
-const {
-  icon = 'ph:chat-teardrop',
-  variant = 'neutral',
-  title,
-  description,
-  filled,
-} = defineProps<Props>()
-
-const actualIcon = computed(() => {
-  switch (variant) {
-    case 'info': return 'ph:info'
-    case 'success': return 'ph:check-circle'
-    case 'warning': return 'ph:warning'
-    case 'danger': return 'ph:warning-diamond'
-    default: return icon
-  }
-})
-</script>
-
-<template>
-  <div class="vui-alert" :class="[{ filled }, `vui-alert-variant-${variant}`]">
-    <Icon v-if="actualIcon" class="vui-alert-icon" :icon="actualIcon" />
-    <div v-if="$slots.default && !title" class="vui-alert-content">
-      <slot />
-    </div>
-    <div v-else class="vui-alert-default-content">
-      <strong v-if="title">{{ title }}</strong>
-      <p v-if="description">
-        {{ description }}
-      </p>
-      <slot v-else-if="$slots.default" />
-    </div>
-
-    <slot name="end" />
-  </div>
-</template>
+<script setup lang="ts">
+import { Icon } from '@iconify/vue'
+import { computed } from 'vue'
+import './alert.scss'
+
+interface Props {
+  variant?: 'neutral' | 'info' | 'success' | 'warning' | 'danger'
+  /**
+   * Override the variant's default icon
+   */
+  icon?: string
+  /**
+   * Setting a title and description will use slightly different styling other
+   * than slots.
+   */
+  title?: string
+  /**
+   * Use strong color
+   */
+  filled?: boolean
+  description?: string
+}
+
+const {
+  icon = 'ph:chat-teardrop',
+  variant = 'neutral',
+  title,
+  description,
+  filled,
+} = defineProps<Props>()
+
+const actualIcon = computed(() => {
+  switch (variant) {
+    case 'info': return 'ph:info'
+    case 'success': return 'ph:check-circle'
+    case 'warning': return 'ph:warning'
+    case 'danger': return 'ph:warning-diamond'
+    default: return icon
+  }
+})
+</script>
+
+<template>
+  <div class="vui-alert" :class="[{ filled }, `vui-alert-variant-${variant}`]">
+    <Icon v-if="actualIcon" class="vui-alert-icon" :icon="actualIcon" />
+    <div v-if="$slots.default && !title" class="vui-alert-content">
+      <slot />
+    </div>
+    <div v-else class="vui-alert-default-content">
+      <strong v-if="title">{{ title }}</strong>
+      <p v-if="description">
+        {{ description }}
+      </p>
+      <slot v-else-if="$slots.default" />
+    </div>
+
+    <slot name="end" />
+  </div>
+</template>

package/src/components/Alert/alert.scss

@@ -1,161 +1,161 @@
-.vui-alert {
-  display: flex;
-  gap: var(--space-s);
-  border-radius: var(--border-radius-m);
-  padding: var(--space-s);
-  font-size: var(--font-size-m);
-  flex-wrap: nowrap;
-  align-items: center;
-  border: 1px solid var(--color-border);
-
-  .vui-alert-icon {
-    width: 22px;
-    height: 22px;
-  }
-
-  .vui-alert-content,
-  .vui-alert-default-content {
-    flex: 1;
-  }
-
-  .vui-alert-default-content {
-    strong {
-      display: block;
-      font-size: var(--font-size-m);
-      margin-bottom: 2px;
-    }
-
-    p {
-      font-size: var(--font-size-s);
-      color: var(--color-text-light);
-    }
-  }
-
-  .vui-alert-content {
-    font-size: var(--font-size-m);
-    font-weight: 400;
-  }
-
-  &.filled {
-    border: none !important;
-  }
-
-  &.vui-alert-variant-neutral {
-    .vui-alert-icon path {
-      color: var(--color-text-light);
-    }
-
-    &.filled {
-      background-color: var(--color-bg-raised);
-    }
-  }
-
-  &.vui-alert-variant-info {
-    .vui-alert-icon path {
-      color: var(--color-text-blue);
-    }
-
-    &.filled {
-      background-color: hsla(from var(--color-bg-blue-lowered) h s l / 0.5);
-    }
-  }
-
-  &.vui-alert-variant-success {
-    .vui-alert-icon path {
-      color: var(--color-text-green);
-    }
-
-    &.filled {
-      background-color: hsla(from var(--color-bg-green-lowered) h s l / 0.4);
-    }
-  }
-
-  &.vui-alert-variant-warning {
-    .vui-alert-icon path {
-      color: var(--color-text-yellow);
-    }
-
-    &.filled {
-      background-color: hsla(from var(--color-bg-yellow-lowered) h s l / 0.6);
-    }
-  }
-
-  &.vui-alert-variant-danger {
-    .vui-alert-icon path {
-      color: var(--color-text-red);
-    }
-
-    &.filled {
-      background-color: hsla(from var(--color-bg-red-lowered) h s l / 0.5);
-    }
-  }
-}
-
-:root.light {
-  .vui-alert.filled {
-    border: none;
-
-    &.vui-alert-variant-neutral {
-      background-color: var(--color-bg-medium);
-    }
-
-    &.vui-alert-variant-danger {
-      background-color: hsla(from var(--color-bg-red-raised) h s l / 0.15);
-    }
-
-    &.vui-alert-variant-warning {
-      background-color: hsla(from var(--color-bg-yellow-raised) h s l / 0.2);
-    }
-
-    &.vui-alert-variant-success {
-      background-color: hsla(from var(--color-bg-green-raised) h s l / 0.15);
-    }
-
-    &.vui-alert-variant-info {
-      background-color: hsla(from var(--color-bg-blue-raised) h s l / 0.15);
-    }
-  }
-
-  // .vui-alert.vui-alert-variant-success:not(.filled, .outline) {
-  //   background-color: hsla(from var(--color-text-green) h s l / 0.15);
-  // }
-
-  // .vui-alert.vui-alert-variant-danger .vui-alert-icon path {
-  //   color: var(--color-border-red);
-  // }
-
-  // .vui-alert.vui-alert-variant-warning .vui-alert-icon path {
-  //   color: var(--color-border-yellow);
-  // }
-
-  // .vui-alert.vui-alert-variant-success .vui-alert-icon path {
-  //   color: var(--color-border-green);
-  // }
-
-  // .vui-alert.vui-alert-variant-info .vui-alert-icon path {
-  //   color: var(--color-border-blue);
-  // }
-
-  // .vui-alert {
-  //   &.filled {
-  //     &.vui-alert-variant-danger .vui-alert-icon path,
-  //     &.vui-alert-variant-warning .vui-alert-icon path,
-  //     &.vui-alert-variant-success .vui-alert-icon path,
-  //     &.vui-alert-variant-info .vui-alert-icon path {
-  //       color: var(--color-text-light);
-  //     }
-
-  //     strong,
-  //     p {
-  //       color: var(--color-text);
-  //     }
-  //   }
-  // }
-
-  // .vui-alert.filled.vui-alert-variant-danger .vui-alert-icon path,
-  // .vui-alert.filled.vui-alert-variant-warning .vui-alert-icon path,
-  // .vui-alert.filled.vui-alert-variant-success .vui-alert-icon path,
-  // .vui-alert.filled.vui-alert-variant-info .vui-alert-icon path {
-  //   color: var(--color-text-light);
-  // }
-}
+.vui-alert {
+  display: flex;
+  gap: var(--space-s);
+  border-radius: var(--border-radius-m);
+  padding: var(--space-s);
+  font-size: var(--font-size-m);
+  flex-wrap: nowrap;
+  align-items: center;
+  border: 1px solid var(--color-border);
+
+  .vui-alert-icon {
+    width: 22px;
+    height: 22px;
+  }
+
+  .vui-alert-content,
+  .vui-alert-default-content {
+    flex: 1;
+  }
+
+  .vui-alert-default-content {
+    strong {
+      display: block;
+      font-size: var(--font-size-m);
+      margin-bottom: 2px;
+    }
+
+    p {
+      font-size: var(--font-size-s);
+      color: var(--color-text-light);
+    }
+  }
+
+  .vui-alert-content {
+    font-size: var(--font-size-m);
+    font-weight: 400;
+  }
+
+  &.filled {
+    border: none !important;
+  }
+
+  &.vui-alert-variant-neutral {
+    .vui-alert-icon path {
+      color: var(--color-text-light);
+    }
+
+    &.filled {
+      background-color: var(--color-bg-raised);
+    }
+  }
+
+  &.vui-alert-variant-info {
+    .vui-alert-icon path {
+      color: var(--color-text-blue);
+    }
+
+    &.filled {
+      background-color: hsla(from var(--color-bg-blue-lowered) h s l / 0.5);
+    }
+  }
+
+  &.vui-alert-variant-success {
+    .vui-alert-icon path {
+      color: var(--color-text-green);
+    }
+
+    &.filled {
+      background-color: hsla(from var(--color-bg-green-lowered) h s l / 0.4);
+    }
+  }
+
+  &.vui-alert-variant-warning {
+    .vui-alert-icon path {
+      color: var(--color-text-yellow);
+    }
+
+    &.filled {
+      background-color: hsla(from var(--color-bg-yellow-lowered) h s l / 0.6);
+    }
+  }
+
+  &.vui-alert-variant-danger {
+    .vui-alert-icon path {
+      color: var(--color-text-red);
+    }
+
+    &.filled {
+      background-color: hsla(from var(--color-bg-red-lowered) h s l / 0.5);
+    }
+  }
+}
+
+:root.light {
+  .vui-alert.filled {
+    border: none;
+
+    &.vui-alert-variant-neutral {
+      background-color: var(--color-bg-medium);
+    }
+
+    &.vui-alert-variant-danger {
+      background-color: hsla(from var(--color-bg-red-raised) h s l / 0.15);
+    }
+
+    &.vui-alert-variant-warning {
+      background-color: hsla(from var(--color-bg-yellow-raised) h s l / 0.2);
+    }
+
+    &.vui-alert-variant-success {
+      background-color: hsla(from var(--color-bg-green-raised) h s l / 0.15);
+    }
+
+    &.vui-alert-variant-info {
+      background-color: hsla(from var(--color-bg-blue-raised) h s l / 0.15);
+    }
+  }
+
+  // .vui-alert.vui-alert-variant-success:not(.filled, .outline) {
+  //   background-color: hsla(from var(--color-text-green) h s l / 0.15);
+  // }
+
+  // .vui-alert.vui-alert-variant-danger .vui-alert-icon path {
+  //   color: var(--color-border-red);
+  // }
+
+  // .vui-alert.vui-alert-variant-warning .vui-alert-icon path {
+  //   color: var(--color-border-yellow);
+  // }
+
+  // .vui-alert.vui-alert-variant-success .vui-alert-icon path {
+  //   color: var(--color-border-green);
+  // }
+
+  // .vui-alert.vui-alert-variant-info .vui-alert-icon path {
+  //   color: var(--color-border-blue);
+  // }
+
+  // .vui-alert {
+  //   &.filled {
+  //     &.vui-alert-variant-danger .vui-alert-icon path,
+  //     &.vui-alert-variant-warning .vui-alert-icon path,
+  //     &.vui-alert-variant-success .vui-alert-icon path,
+  //     &.vui-alert-variant-info .vui-alert-icon path {
+  //       color: var(--color-text-light);
+  //     }
+
+  //     strong,
+  //     p {
+  //       color: var(--color-text);
+  //     }
+  //   }
+  // }
+
+  // .vui-alert.filled.vui-alert-variant-danger .vui-alert-icon path,
+  // .vui-alert.filled.vui-alert-variant-warning .vui-alert-icon path,
+  // .vui-alert.filled.vui-alert-variant-success .vui-alert-icon path,
+  // .vui-alert.filled.vui-alert-variant-info .vui-alert-icon path {
+  //   color: var(--color-text-light);
+  // }
+}