arvue-ui 0.4.0 → 0.5.0

package/dist/style.css

@@ -13,52 +13,54 @@
 
 @import './autocomplete-separator.css';
 
-@import 'combobox.css';
+@import './combobox.css';
 
-@import 'combobox-content.css';
+@import './combobox-content.css';
 
-@import 'combobox-empty.css';
+@import './combobox-empty.css';
 
-@import 'combobox-input.css';
+@import './combobox-input.css';
 
-@import 'combobox-item.css';
+@import './combobox-item.css';
 
-@import 'combobox-label.css';
+@import './combobox-label.css';
 
-@import 'combobox-separator.css';
+@import './combobox-separator.css';
 
 @import './dialog-content.css';
 
-@import "./dialog-description.css";
+@import './dialog-description.css';
 
-@import "./dialog-footer.css";
+@import './dialog-footer.css';
 
-@import "./dialog-header.css";
+@import './dialog-header.css';
 
 @import './dialog-overlay.css';
 
-@import "./dialog-title.css";
+@import './dialog-title.css';
 
 @import './drawer-content.css';
 
-@import "./drawer-description.css";
+@import './drawer-description.css';
 
-@import "./drawer-footer.css";
+@import './drawer-footer.css';
 
-@import "./drawer-header.css";
+@import './drawer-header.css';
 
 @import './drawer-overlay.css';
 
-@import "./drawer-title.css";
+@import './drawer-title.css';
 
-@import 'sheet-content.css';
+@import './sheet-content.css';
 
-@import "sheet-description.css";
+@import './sheet-description.css';
 
-@import "sheet-footer.css";
+@import './sheet-footer.css';
 
-@import "sheet-header.css";
+@import './sheet-header.css';
 
-@import 'sheet-overlay.css';
+@import './sheet-overlay.css';
 
-@import "sheet-title.css";
+@import './sheet-title.css';
+
+@import './sonner.css';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "arvue-ui",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/Articus-Company/arvue-ui.git",
@@ -40,7 +40,8 @@
     "class-variance-authority": "^0.7.1",
     "motion-v": "^2.2.1",
     "reka-ui": "^2.9.8",
-    "vaul-vue": "^0.4.1"
+    "vaul-vue": "^0.4.1",
+    "vue-sonner": "^2.0.9"
   },
   "devDependencies": {
     "@microsoft/api-extractor": "^7.58.7",

package/src/autocomplete/AutocompleteInput.vue

@@ -5,7 +5,7 @@
 <template>
     <div class="arvue-autocomplete-input-wrapper">
         <AutocompleteAnchor
-            class="state-with-inner-icon right"
+            :class="{ 'state-with-inner-icon right': showTriggerButton }"
             :reference="inputRef?.$el"
         >
             <AutocompleteInput

package/src/combobox/Combobox.vue

@@ -1,5 +1,5 @@
 <style>
-@import 'combobox.css';
+@import './combobox.css';
 </style>
 
 <template>

package/src/combobox/ComboboxContent.vue

@@ -1,5 +1,5 @@
 <style>
-@import 'combobox-content.css';
+@import './combobox-content.css';
 </style>
 
 <template>

package/src/combobox/ComboboxEmpty.vue

@@ -1,5 +1,5 @@
 <style>
-@import 'combobox-empty.css';
+@import './combobox-empty.css';
 </style>
 
 <template>

package/src/combobox/ComboboxInput.vue

@@ -1,11 +1,11 @@
 <style>
-@import 'combobox-input.css';
+@import './combobox-input.css';
 </style>
 
 <template>
     <div class="arvue-combobox-input-wrapper">
         <ComboboxAnchor
-            class="state-with-inner-icon right"
+            :class="{ 'state-with-inner-icon right': showTriggerButton }"
             :reference="inputRef?.$el"
         >
             <ComboboxInput

package/src/combobox/ComboboxItem.vue

@@ -1,5 +1,5 @@
 <style>
-@import 'combobox-item.css';
+@import './combobox-item.css';
 </style>
 
 <template>

package/src/combobox/ComboboxLabel.vue

@@ -1,5 +1,5 @@
 <style>
-@import 'combobox-label.css';
+@import './combobox-label.css';
 </style>
 
 <template>

package/src/combobox/ComboboxSeparator.vue

@@ -1,5 +1,5 @@
 <style>
-@import 'combobox-separator.css';
+@import './combobox-separator.css';
 </style>
 
 <template>

package/src/dialog/DialogDescription.vue

@@ -1,5 +1,5 @@
 <style>
-@import "./dialog-description.css";
+@import './dialog-description.css';
 </style>
 
 <template>

package/src/dialog/DialogFooter.vue

@@ -1,5 +1,5 @@
 <style>
-@import "./dialog-footer.css";
+@import './dialog-footer.css';
 </style>
 
 <template>

package/src/dialog/DialogHeader.vue

@@ -1,5 +1,5 @@
 <style>
-@import "./dialog-header.css";
+@import './dialog-header.css';
 </style>
 
 <template>

package/src/dialog/DialogTitle.vue

@@ -1,5 +1,5 @@
 <style>
-@import "./dialog-title.css";
+@import './dialog-title.css';
 </style>
 
 <template>

package/src/drawer/DrawerDescription.vue

@@ -1,5 +1,5 @@
 <style>
-@import "./drawer-description.css";
+@import './drawer-description.css';
 </style>
 
 <template>

package/src/drawer/DrawerFooter.vue

@@ -1,5 +1,5 @@
 <style>
-@import "./drawer-footer.css";
+@import './drawer-footer.css';
 </style>
 
 <template>

package/src/drawer/DrawerHeader.vue

@@ -1,5 +1,5 @@
 <style>
-@import "./drawer-header.css";
+@import './drawer-header.css';
 </style>
 
 <template>

package/src/drawer/DrawerTitle.vue

@@ -1,5 +1,5 @@
 <style>
-@import "./drawer-title.css";
+@import './drawer-title.css';
 </style>
 
 <template>

package/src/index.ts

@@ -3,3 +3,4 @@ export * from './combobox'
 export * from './dialog'
 export * from './drawer'
 export * from './sheet'
+export * from './sonner'

package/src/sheet/SheetContent.vue

@@ -1,5 +1,5 @@
 <style>
-@import 'sheet-content.css';
+@import './sheet-content.css';
 </style>
 
 <template>

package/src/sheet/SheetDescription.vue

@@ -1,5 +1,5 @@
 <style>
-@import "sheet-description.css";
+@import './sheet-description.css';
 </style>
 
 <template>

package/src/sheet/SheetFooter.vue

@@ -1,5 +1,5 @@
 <style>
-@import "sheet-footer.css";
+@import './sheet-footer.css';
 </style>
 
 <template>

package/src/sheet/SheetHeader.vue

@@ -1,5 +1,5 @@
 <style>
-@import "sheet-header.css";
+@import './sheet-header.css';
 </style>
 
 <template>

package/src/sheet/SheetOverlay.vue

@@ -1,5 +1,5 @@
 <style>
-@import 'sheet-overlay.css';
+@import './sheet-overlay.css';
 </style>
 
 <template>

package/src/sheet/SheetTitle.vue

@@ -1,5 +1,5 @@
 <style>
-@import "sheet-title.css";
+@import './sheet-title.css';
 </style>
 
 <template>

package/src/sonner/Sonner.vue

@@ -0,0 +1,47 @@
+<style>
+@import './sonner.css';
+</style>
+
+<template>
+    <Toaster
+        v-bind="props"
+        :class="clsx('arvue-sonner', props.class)"
+    >
+        <template #success-icon>
+            <i class="fas fa-check-circle"/>
+        </template>
+        <template #info-icon>
+            <i class="fas fa-info-circle"/>
+        </template>
+        <template #warning-icon>
+            <i class="fas fa-exclamation-triangle"/>
+        </template>
+        <template #error-icon>
+            <i class="fas fa-skull"/>
+        </template>
+        <template #loading-icon>
+            <div>
+                <i class="fas fa-spinner wa-animation-spin"/>
+            </div>
+        </template>
+        <template #close-icon>
+            <i class="fas fa-times"/>
+        </template>
+    </Toaster>
+</template>
+
+<script lang="ts">
+import type { ToasterProps } from 'vue-sonner'
+
+export interface SonnerProps extends ToasterProps {
+}
+</script>
+
+<script setup lang="ts">
+import { clsx } from 'clsx'
+import { Toaster } from 'vue-sonner'
+
+const props = withDefaults(defineProps<SonnerProps>(), {
+    richColors: true,
+})
+</script>

package/src/sonner/index.ts

@@ -0,0 +1,5 @@
+export {
+    default as Sonner,
+    type SonnerProps,
+} from './Sonner.vue'
+export { toast } from 'vue-sonner'

package/src/sonner/sonner.css

@@ -0,0 +1,91 @@
+/* tsdown/css (postcss-import) не резолвит пути из package.json у пакета, поэтому путь до стилей прямой */
+@import 'vue-sonner/lib/index.css';
+
+.arvue-sonner[data-sonner-toaster] {
+    --offset-top: 5.5rem !important;
+    --offset-right: 1.5rem !important;
+    --offset-left: 1.5rem !important;
+    z-index: 1060;
+}
+
+.arvue-sonner[data-sonner-toaster][data-sonner-theme='light'],
+.arvue-sonner[data-sonner-toaster][data-sonner-theme='dark'] {
+    --normal-bg: var(--alert-background-color);
+    --normal-border: var(--alert-border-color);
+    --normal-text: var(--alert-text-color);
+
+    --success-bg: var(--alert-success-background-color);
+    --success-border: var(--alert-success-border-color);
+    --success-text: var(--alert-success-text-color);
+
+    --info-bg: var(--alert-info-background-color);
+    --info-border: var(--alert-info-border-color);
+    --info-text: var(--alert-info-text-color);
+
+    --warning-bg: var(--alert-warning-background-color);
+    --warning-border: var(--alert-warning-border-color);
+    --warning-text: var(--alert-warning-text-color);
+
+    --error-bg: var(--alert-danger-background-color);
+    --error-border: var(--alert-danger-border-color);
+    --error-text: var(--alert-danger-text-color);
+
+    --border-radius: 0.75em;
+}
+
+.arvue-sonner li[data-sonner-toast][data-styled="true"] {
+    padding: 0.75em 1em;
+    font-weight: normal;
+    font-style: normal;
+    font-size: initial;
+    border-width: 0.125rem;
+    transition: background-color var(--timing-default),
+                opacity var(--timing-default),
+                transform var(--timing-default),
+                height var(--timing-default),
+                box-shadow var(--timing-fast);
+}
+
+.arvue-sonner li[data-sonner-toast][data-styled='true'] [data-description] {
+    color: var(--text-color-hint);
+    font-size: 81.25%;
+}
+
+.arvue-sonner li[data-sonner-toast][data-styled='true'] [data-button] {
+    border-radius: .5em;
+    background: var(--accent-color);
+    margin-left: var(--toast-button-margin-start);
+    outline: 0 none;
+    box-shadow: 0 0.25em 0.75em -0.25em rgba(0, 0, 0, 0.2);
+    cursor: pointer;
+    color: var(--white);
+    transition: color 0.1s ease-in-out,
+                background-color 0.1s ease-in-out,
+                border-color 0.1s ease-in-out,
+                box-shadow 0.1s ease-in-out,
+                opacity 0.1s ease-in-out;
+}
+
+.arvue-sonner li[data-sonner-toast][data-styled='true'] [data-button]:hover {
+    box-shadow: none;
+    background: var(--accent-color);
+}
+
+.arvue-sonner li[data-sonner-toast][data-styled='true'] [data-close-button] {
+    border-width: 0.125rem;
+    border-color: inherit;
+    margin: 0;
+}
+
+.arvue-sonner li[data-sonner-toast][data-styled='true'] [data-close-button] [data-icon] {
+    display: inline-block;
+    margin: 0;
+    color: var(--dark-gray);
+    height: 12px;
+    width: 12px;
+}
+
+html[data-theme="dark"] .arvue-sonner li[data-sonner-toast][data-styled='true'] [data-close-button] [data-icon],
+.arvue-sonner li[data-sonner-toast][data-type='error'][data-styled='true'] [data-close-button] [data-icon]{
+    color: var(--white);
+}