@1337exp/taoui 1.2.2 → 1.3.3

package/dist/styles.css

@@ -779,12 +779,40 @@ to {
     transform: translateY(-50%) translateX(-4px);
 }
 
-.tao-spoiler[data-v-c9f4d962] {
+.tao-popover__panel {
+    z-index: 1050;
+    position: fixed;
+    min-width: 200px;
+    max-width: min(360px, calc(100vw - 16px));
+    padding: var(--tao-space-3);
+    overflow: auto;
+    background: var(--tao-color-surface-raised);
+    color: var(--tao-color-text);
+    border: 1px solid var(--tao-color-border);
+    border-radius: var(--tao-radius-control);
+    box-shadow: var(--tao-shadow-overlay);
+}
+.tao-popover__panel:focus {
+    outline: none;
+}
+.tao-popover__panel:focus-visible {
+    outline: 2px solid var(--tao-color-accent);
+    outline-offset: 2px;
+}
+
+.tao-popover[data-v-e4ead301] {
+    display: inline-block;
+}
+.tao-popover__trigger[data-v-e4ead301] {
+    display: inline-block;
+}
+
+.tao-spoiler[data-v-ccb052cf] {
     border: 1px solid var(--tao-color-border);
     border-radius: var(--tao-radius-panel);
     overflow: hidden;
 }
-.tao-spoiler__header[data-v-c9f4d962] {
+.tao-spoiler__header[data-v-ccb052cf] {
     display: flex;
     align-items: center;
     gap: var(--tao-space-2);
@@ -796,10 +824,10 @@ to {
     cursor: pointer;
     text-align: left;
 }
-.tao-spoiler__header[data-v-c9f4d962]:hover {
+.tao-spoiler__header[data-v-ccb052cf]:hover {
     background: var(--tao-color-surface-hover);
 }
-.tao-spoiler__icon[data-v-c9f4d962] {
+.tao-spoiler__icon[data-v-ccb052cf] {
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -809,49 +837,101 @@ to {
     color: var(--tao-color-accent);
     transition: transform var(--tao-duration-base) var(--tao-ease-base);
 }
-.tao-spoiler__icon--open[data-v-c9f4d962] {
+.tao-spoiler__icon--open[data-v-ccb052cf] {
     transform: rotate(90deg);
 }
-.tao-spoiler__title[data-v-c9f4d962] {
+.tao-spoiler__title[data-v-ccb052cf] {
     font-weight: 500;
     color: var(--tao-color-text);
 }
-.tao-spoiler__content[data-v-c9f4d962] {
+.tao-spoiler__content[data-v-ccb052cf] {
     overflow: hidden;
 }
-.tao-spoiler-slide-enter-active[data-v-c9f4d962],
-.tao-spoiler-slide-leave-active[data-v-c9f4d962] {
+.tao-spoiler-slide-enter-active[data-v-ccb052cf],
+.tao-spoiler-slide-leave-active[data-v-ccb052cf] {
     transition: height var(--tao-duration-slow) var(--tao-ease-base);
     overflow: hidden;
 }
-.tao-spoiler__content-inner[data-v-c9f4d962] {
+.tao-spoiler__content-inner[data-v-ccb052cf] {
     padding: var(--tao-space-4);
     background: var(--tao-color-surface);
 }
 
-.tao-copy[data-v-73a42ad9] {
-    display: inline-block;
+.tao-spoiler-group[data-v-6b172e89] {
+    overflow: hidden;
+    border: 1px solid var(--tao-color-border);
+    border-radius: var(--tao-radius-panel);
 }
-.tao-copy__button[data-v-73a42ad9] {
+.tao-spoiler-group[data-v-6b172e89] .tao-spoiler {
+    border: none;
+    border-radius: 0;
+    border-bottom: 1px solid var(--tao-color-border);
+}
+.tao-spoiler-group[data-v-6b172e89] .tao-spoiler:last-child {
+    border-bottom: none;
+}
+
+.tao-copy__tip {
+    z-index: 1060;
+    position: fixed;
     padding: var(--tao-space-2) var(--tao-space-3);
-    background: var(--tao-color-surface-sunken);
-    border: 1px solid var(--tao-color-border-strong);
+    overflow: visible;
+    background: var(--tao-color-surface-raised);
+    color: var(--tao-color-text-strong);
+    font-size: var(--tao-font-size-xs);
+    font-family: var(--tao-font-family);
+    line-height: 1.3;
+    white-space: nowrap;
     border-radius: var(--tao-radius-control);
-    color: var(--tao-color-text);
-    font-size: var(--tao-font-size-sm);
-    font-family: inherit;
+    box-shadow: var(--tao-shadow-lg);
+    pointer-events: none;
+}
+.tao-copy__tip::after {
+    content: '';
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    width: 8px;
+    height: 8px;
+    margin-top: -4px;
+    margin-left: -4px;
+    background: var(--tao-color-surface-raised);
+    transform: rotate(45deg);
+}
+
+.tao-copy[data-v-1953c07e] {
+    display: inline-flex;
+    align-items: center;
+    vertical-align: middle;
+}
+.tao-copy__button[data-v-1953c07e] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    margin: 0;
+    padding: 0;
+    border: none;
+    border-radius: var(--tao-radius-control);
+    background: transparent;
+    color: var(--tao-color-text-muted);
     cursor: pointer;
     transition: var(--tao-transition-base);
 }
-.tao-copy__button[data-v-73a42ad9]:hover {
+.tao-copy__button svg[data-v-1953c07e] {
+    display: block;
+}
+.tao-copy__button[data-v-1953c07e]:hover {
+    color: var(--tao-color-accent);
     background: var(--tao-color-surface-hover);
-    border-color: var(--tao-color-accent);
+}
+.tao-copy__button--copied[data-v-1953c07e] {
     color: var(--tao-color-accent);
 }
-.tao-copy__button--copied[data-v-73a42ad9] {
-    background: var(--tao-color-accent);
-    border-color: var(--tao-color-accent);
-    color: var(--tao-color-on-accent);
+.tao-copy__button[data-v-1953c07e]:focus-visible {
+    outline: 2px solid var(--tao-color-accent);
+    outline-offset: 2px;
 }
 
 .tao-container[data-v-4c0deb90] {
@@ -950,7 +1030,7 @@ to {
 }
 }
 
-.tao-image[data-v-9da4bb7d] {
+.tao-image[data-v-522fe4da] {
     position: relative;
     display: inline-block;
     width: 100%;
@@ -958,17 +1038,17 @@ to {
     overflow: hidden;
     user-select: none;
 }
-.tao-image img[data-v-9da4bb7d] {
+.tao-image img[data-v-522fe4da] {
     display: block;
     width: 100%;
     height: 100%;
     object-fit: contain;
     transition: opacity var(--tao-duration-slow) var(--tao-ease-base);
 }
-.tao-image__img--hidden[data-v-9da4bb7d] {
+.tao-image__img--hidden[data-v-522fe4da] {
     opacity: 0;
 }
-.tao-image__img--pixelated[data-v-9da4bb7d] {
+.tao-image__img--pixelated[data-v-522fe4da] {
     image-rendering: optimizeSpeed;
     image-rendering: -moz-crisp-edges;
     image-rendering: -o-crisp-edges;
@@ -977,7 +1057,7 @@ to {
     image-rendering: optimize-contrast;
     -ms-interpolation-mode: nearest-neighbor;
 }
-.tao-image__placeholder[data-v-9da4bb7d] {
+.tao-image__placeholder[data-v-522fe4da] {
     font-size: var(--tao-font-size-sm);
     font-family: var(--tao-font-family);
     letter-spacing: 0.01rem;
@@ -1152,6 +1232,36 @@ to {
     background-image: linear-gradient(to right, transparent, var(--tao-color-accent), transparent);
 }
 
+.tao-fieldset[data-v-34440ba5] {
+    margin: 0;
+    min-width: 0;
+    padding: 0 var(--tao-space-4) var(--tao-space-4);
+    border: 1px solid var(--tao-color-border-strong);
+    border-radius: var(--tao-radius-panel);
+    color: var(--tao-color-text);
+    background: transparent;
+}
+.tao-fieldset__legend[data-v-34440ba5] {
+    padding: 0 var(--tao-space-2);
+    font-size: var(--tao-font-size-sm);
+    font-weight: 500;
+    color: var(--tao-color-text);
+    background: var(--tao-color-bg);
+}
+.tao-fieldset--start .tao-fieldset__legend[data-v-34440ba5] {
+    margin-inline-start: var(--tao-space-2);
+}
+.tao-fieldset--center .tao-fieldset__legend[data-v-34440ba5] {
+    margin-inline: auto;
+}
+.tao-fieldset--end .tao-fieldset__legend[data-v-34440ba5] {
+    margin-inline-start: auto;
+    margin-inline-end: var(--tao-space-2);
+}
+.tao-fieldset__body[data-v-34440ba5] {
+    padding-top: var(--tao-space-3);
+}
+
 .tao-animated-border[data-v-f1534571] {
     background: var(--tao-color-surface-raised);
     position: relative;
@@ -1497,12 +1607,17 @@ to {
     outline: none;
 }
 
-.tao-file-drop[data-v-3543419a] {
+.tao-file-drop[data-v-fbd848b0] {
     display: flex;
-    gap: var(--tao-space-3);
+    flex-direction: column;
+    gap: var(--tao-space-2);
     user-select: none;
 }
-.tao-file-drop__clear[data-v-3543419a] {
+.tao-file-drop__row[data-v-fbd848b0] {
+    display: flex;
+    gap: var(--tao-space-3);
+}
+.tao-file-drop__clear[data-v-fbd848b0] {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -1516,10 +1631,10 @@ to {
     font-family: inherit;
     transition: var(--tao-transition-base);
 }
-.tao-file-drop__clear[data-v-3543419a]:hover {
+.tao-file-drop__clear[data-v-fbd848b0]:hover {
     background-color: color-mix(in srgb, var(--tao-color-danger) 22%, transparent);
 }
-.tao-file-drop__zone[data-v-3543419a] {
+.tao-file-drop__zone[data-v-fbd848b0] {
     flex-grow: 1;
     font-size: var(--tao-font-size-sm);
     font-family: var(--tao-font-family);
@@ -1531,24 +1646,83 @@ to {
     cursor: pointer;
     transition: var(--tao-transition-base);
 }
-.tao-file-drop__zone[data-v-3543419a]:hover,
-.tao-file-drop__zone[data-v-3543419a]:focus-within {
+.tao-file-drop__zone[data-v-fbd848b0]:hover,
+.tao-file-drop__zone[data-v-fbd848b0]:focus-within {
     background-color: var(--tao-color-accent-subtle);
     border-color: var(--tao-color-accent);
 }
-.tao-file-drop__zone--dragging[data-v-3543419a] {
+.tao-file-drop__zone--dragging[data-v-fbd848b0] {
     border-color: var(--tao-color-text-strong);
     background-color: var(--tao-color-surface-sunken);
 }
-.tao-file-drop__zone--small[data-v-3543419a] {
+.tao-file-drop__zone--small[data-v-fbd848b0] {
     padding: var(--tao-space-5) var(--tao-space-4);
 }
-.tao-file-drop__zone--medium[data-v-3543419a] {
+.tao-file-drop__zone--medium[data-v-fbd848b0] {
     padding: var(--tao-space-8) var(--tao-space-5);
 }
-.tao-file-drop__zone--large[data-v-3543419a] {
+.tao-file-drop__zone--large[data-v-fbd848b0] {
     padding: var(--tao-space-10) var(--tao-space-6);
 }
+.tao-file-drop__list[data-v-fbd848b0] {
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    list-style: none;
+    border: 1px solid var(--tao-color-border);
+    border-radius: var(--tao-radius-control);
+}
+.tao-file-drop__file[data-v-fbd848b0] {
+    display: flex;
+    align-items: center;
+    gap: var(--tao-space-2);
+    min-width: 0;
+    min-height: 36px;
+    padding: 0 var(--tao-space-2) 0 var(--tao-space-3);
+    border-bottom: 1px solid var(--tao-color-border);
+    background: var(--tao-color-surface-raised);
+    color: var(--tao-color-text);
+}
+.tao-file-drop__file[data-v-fbd848b0]:last-child {
+    border-bottom: none;
+}
+.tao-file-drop__name[data-v-fbd848b0] {
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    font-size: var(--tao-font-size-sm);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    user-select: text;
+}
+.tao-file-drop__meta[data-v-fbd848b0] {
+    flex-shrink: 0;
+    font-size: var(--tao-font-size-xs);
+    color: var(--tao-color-text-muted);
+}
+.tao-file-drop__remove[data-v-fbd848b0] {
+    flex-shrink: 0;
+    width: 28px;
+    height: 28px;
+    margin: 0;
+    padding: 0;
+    border: none;
+    border-radius: var(--tao-radius-sm);
+    background: none;
+    color: var(--tao-color-text-muted);
+    font: inherit;
+    font-size: var(--tao-font-size-sm);
+    line-height: 1;
+    cursor: pointer;
+}
+.tao-file-drop__remove[data-v-fbd848b0]:hover {
+    color: var(--tao-color-danger);
+    background: var(--tao-color-danger-subtle);
+}
+.tao-file-drop__remove[data-v-fbd848b0]:focus-visible {
+    outline: 2px solid var(--tao-color-accent);
+    outline-offset: 2px;
+}
 
 .tao-dropdown-menu__list {
     z-index: 1050;
@@ -1903,7 +2077,6 @@ to {
 .tao-combobox--open .tao-combobox__chevron[data-v-adeb76a4] {
     transform: rotate(180deg);
 }
-
 .tao-date__panel {
     z-index: 1050;
     position: fixed;
@@ -1916,12 +2089,14 @@ to {
     border-radius: var(--tao-radius-control);
     box-shadow: var(--tao-shadow-overlay);
 }
+
 .tao-date__header {
     display: flex;
     align-items: center;
     gap: var(--tao-space-2);
     margin-bottom: var(--tao-space-3);
 }
+
 .tao-date__month {
     flex: 1;
     margin: 0;
@@ -1930,6 +2105,7 @@ to {
     text-align: center;
     color: var(--tao-color-text-strong);
 }
+
 .tao-date__nav {
     display: inline-flex;
     flex: 0 0 auto;
@@ -1945,25 +2121,31 @@ to {
     color: var(--tao-color-text);
     cursor: pointer;
 }
+
 .tao-date__nav svg {
     display: block;
 }
+
 .tao-date__nav:hover {
     background: var(--tao-color-surface-hover);
 }
+
 .tao-date__nav:focus-visible {
     outline: 2px solid var(--tao-color-accent);
     outline-offset: 2px;
 }
+
 .tao-date__weekdays,
 .tao-date__grid {
     display: grid;
     grid-template-columns: repeat(7, 1fr);
     gap: 2px;
 }
+
 .tao-date__weekdays {
     margin-bottom: var(--tao-space-1);
 }
+
 .tao-date__weekdays span {
     display: flex;
     align-items: center;
@@ -1973,6 +2155,7 @@ to {
     font-size: var(--tao-font-size-xs);
     text-transform: lowercase;
 }
+
 .tao-date__day {
     display: flex;
     align-items: center;
@@ -1989,38 +2172,65 @@ to {
     font-size: var(--tao-font-size-sm);
     cursor: pointer;
 }
+
 .tao-date__day--outside {
     color: var(--tao-color-text-muted);
     opacity: 0.55;
 }
+
 .tao-date__day--today {
     border-color: var(--tao-color-accent);
 }
+
+.tao-date__day--in-range {
+    background: var(--tao-color-accent-subtle-hover);
+    border-radius: 0;
+    opacity: 1;
+}
+
+.tao-date__day--range-start {
+    border-radius: var(--tao-radius-sm) 0 0 var(--tao-radius-sm);
+}
+
+.tao-date__day--range-end {
+    border-radius: 0 var(--tao-radius-sm) var(--tao-radius-sm) 0;
+}
+
+.tao-date__day--range-start.tao-date__day--range-end {
+    border-radius: var(--tao-radius-sm);
+}
+
 .tao-date__day--selected {
     background: var(--tao-color-accent);
     color: var(--tao-color-on-accent);
     opacity: 1;
 }
-.tao-date__day--cursor:not(.tao-date__day--selected) {
+
+.tao-date__day--cursor:not(.tao-date__day--selected):not(.tao-date__day--in-range) {
     background: var(--tao-color-surface-hover);
 }
-.tao-date__day:hover:not(:disabled):not(.tao-date__day--selected) {
+
+.tao-date__day:hover:not(:disabled):not(.tao-date__day--selected):not(.tao-date__day--in-range) {
     background: var(--tao-color-surface-hover);
 }
+
 .tao-date__day:disabled {
     opacity: 0.35;
     cursor: not-allowed;
 }
+
 .tao-date__day:focus-visible {
     outline: 2px solid var(--tao-color-accent);
     outline-offset: 1px;
 }
+
 .tao-date__footer {
     display: flex;
     justify-content: space-between;
     gap: var(--tao-space-2);
     margin-top: var(--tao-space-3);
 }
+
 .tao-date__link {
     margin: 0;
     padding: 0;
@@ -2031,22 +2241,75 @@ to {
     font-size: var(--tao-font-size-sm);
     cursor: pointer;
 }
+
 .tao-date__link:hover:not(:disabled) {
     color: var(--tao-color-accent-hover);
 }
+
 .tao-date__link:disabled {
     color: var(--tao-color-text-muted);
     cursor: not-allowed;
 }
+
 .tao-date__link:focus-visible {
     outline: 2px solid var(--tao-color-accent);
     outline-offset: 2px;
 }
 
-.tao-date[data-v-4227e5f8] {
+.tao-date[data-v-f4a9cddd] {
+    width: 100%;
+}
+.tao-date__trigger[data-v-f4a9cddd] {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--tao-space-2);
+    width: 100%;
+    min-height: 36px;
+    padding: var(--tao-space-2) var(--tao-space-3);
+    border: 1px solid var(--tao-color-border-strong);
+    border-radius: var(--tao-radius-control);
+    background: var(--tao-color-input-bg);
+    color: var(--tao-color-input-text);
+    font-size: var(--tao-font-size-md);
+    font-family: inherit;
+    text-align: left;
+    cursor: pointer;
+    transition: var(--tao-transition-base);
+}
+.tao-date__trigger--placeholder[data-v-f4a9cddd] {
+    color: var(--tao-color-input-placeholder);
+}
+.tao-date__trigger[data-v-f4a9cddd]:focus {
+    outline: none;
+    border-color: var(--tao-color-accent);
+    box-shadow: 0 0 0 2px var(--tao-color-accent-subtle-hover);
+}
+.tao-date--invalid .tao-date__trigger[data-v-f4a9cddd] {
+    border-color: var(--tao-color-danger);
+}
+.tao-date--invalid .tao-date__trigger[data-v-f4a9cddd]:focus {
+    box-shadow: 0 0 0 2px var(--tao-color-danger-subtle);
+}
+.tao-date__trigger[data-v-f4a9cddd]:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+}
+.tao-date__value[data-v-f4a9cddd] {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.tao-date__icon[data-v-f4a9cddd] {
+    flex-shrink: 0;
+    opacity: 0.7;
+}
+
+.tao-date-range[data-v-4e222262] {
     width: 100%;
 }
-.tao-date__trigger[data-v-4227e5f8] {
+.tao-date-range__trigger[data-v-4e222262] {
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -2064,31 +2327,31 @@ to {
     cursor: pointer;
     transition: var(--tao-transition-base);
 }
-.tao-date__trigger--placeholder[data-v-4227e5f8] {
+.tao-date-range__trigger--placeholder[data-v-4e222262] {
     color: var(--tao-color-input-placeholder);
 }
-.tao-date__trigger[data-v-4227e5f8]:focus {
+.tao-date-range__trigger[data-v-4e222262]:focus {
     outline: none;
     border-color: var(--tao-color-accent);
     box-shadow: 0 0 0 2px var(--tao-color-accent-subtle-hover);
 }
-.tao-date--invalid .tao-date__trigger[data-v-4227e5f8] {
+.tao-date-range--invalid .tao-date-range__trigger[data-v-4e222262] {
     border-color: var(--tao-color-danger);
 }
-.tao-date--invalid .tao-date__trigger[data-v-4227e5f8]:focus {
+.tao-date-range--invalid .tao-date-range__trigger[data-v-4e222262]:focus {
     box-shadow: 0 0 0 2px var(--tao-color-danger-subtle);
 }
-.tao-date__trigger[data-v-4227e5f8]:disabled {
+.tao-date-range__trigger[data-v-4e222262]:disabled {
     opacity: 0.6;
     cursor: not-allowed;
 }
-.tao-date__value[data-v-4227e5f8] {
+.tao-date-range__value[data-v-4e222262] {
     min-width: 0;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
 }
-.tao-date__icon[data-v-4227e5f8] {
+.tao-date-range__icon[data-v-4e222262] {
     flex-shrink: 0;
     opacity: 0.7;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1337exp/taoui",
-  "version": "1.2.2",
+  "version": "1.3.3",
   "description": "Modern UI component library for Nuxt/Vue",
   "homepage": "https://666.io",
   "type": "module",