@routa/ui-vue 0.1.0

package/src/tag/style/index.css

@@ -0,0 +1,207 @@
+.l-tag {
+  /* --- Theme Variables --- */
+  --l-tag-theme-color: var(--l-color-primary);
+  --l-tag-theme-content: var(--l-color-primary-content);
+  
+  /* --- Functional Variables --- */
+  --l-tag-bg: transparent;
+  --l-tag-text: currentColor;
+  --l-tag-border: transparent;
+  --l-tag-padding: 2px 8px;
+  --l-tag-font-size: 11px;
+  --l-tag-gap: 4px;
+  --l-tag-radius: var(--l-radius-soft);
+  
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--l-tag-padding);
+  font-size: var(--l-tag-font-size);
+  font-weight: var(--l-font-weight-medium);
+  line-height: calc(1.666666666667 * var(--l-tag-font-size));
+  gap: var(--l-tag-gap);
+  border-radius: var(--l-tag-radius);
+  border: 1px solid var(--l-tag-border);
+  background: var(--l-tag-bg);
+  color: var(--l-tag-text);
+  white-space: nowrap;
+  vertical-align: middle;
+  box-sizing: border-box;
+  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  user-select: none;
+  position: relative;
+}
+
+/* --- Types (Refined Palettes) --- */
+.l-tag--type-primary {
+  --l-tag-theme-color: var(--l-color-primary);
+  --l-tag-theme-content: var(--l-color-primary-content);
+}
+
+.l-tag--type-default {
+  --l-tag-theme-color: var(--l-color-neutral-border);
+  --l-tag-theme-content: var(--l-color-neutral-content);
+  --l-tag-bg-fallback: var(--l-bg-subtle);
+}
+
+.l-tag--type-success {
+  --l-tag-theme-color: var(--l-color-success);
+  --l-tag-theme-content: var(--l-color-success-content);
+}
+
+.l-tag--type-warning {
+  --l-tag-theme-color: var(--l-color-warning);
+  --l-tag-theme-content: var(--l-color-warning-content);
+}
+
+.l-tag--type-danger {
+  --l-tag-theme-color: var(--l-color-danger);
+  --l-tag-theme-content: var(--l-color-danger-content);
+}
+
+/* --- Variants --- */
+.l-tag--variant-solid {
+  --l-tag-bg: var(--l-tag-theme-color);
+  --l-tag-text: var(--l-tag-theme-content);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
+.l-tag--type-default.l-tag--variant-solid {
+  --l-tag-bg: var(--l-tag-bg-fallback);
+  border-color: color-mix(in srgb, var(--l-tag-theme-color), transparent 80%);
+}
+
+.l-tag.l-tag--type-default.l-tag--variant-solid.is-checked,
+.l-tag.l-tag--type-default.l-tag--variant-outline.is-checked,
+.l-tag.l-tag--type-default.l-tag--variant-subtle.is-checked {
+  --l-tag-bg: var(--l-color-primary);
+  --l-tag-text: var(--l-color-primary-content);
+}
+
+.l-tag--variant-subtle {
+  --l-tag-bg: color-mix(in srgb, var(--l-tag-theme-color), transparent 88%);
+  --l-tag-text: var(--l-tag-theme-color);
+  --l-tag-border: color-mix(in srgb, var(--l-tag-theme-color), transparent 80%);
+  backdrop-filter: blur(8px);
+}
+
+.l-tag--type-default.l-tag--variant-subtle {
+  --l-tag-bg: var(--l-bg-subtle);
+  --l-tag-text: var(--l-text-main);
+  --l-tag-border: color-mix(in srgb, var(--l-control-border), transparent 20%);
+}
+
+.l-tag--variant-outline {
+  --l-tag-bg: transparent;
+  --l-tag-text: var(--l-tag-theme-color);
+  --l-tag-border: color-mix(in srgb, var(--l-tag-theme-color), transparent 60%);
+}
+
+.l-tag.is-checkable {
+  cursor: pointer;
+  user-select: none;
+}
+
+.l-tag.is-checkable.is-checked {
+  --l-tag-bg: var(--l-tag-theme-color);
+  --l-tag-text: var(--l-tag-theme-content);
+  box-shadow: 0 4px 12px color-mix(in srgb, var(--l-tag-theme-color), transparent 70%);
+}
+
+/* --- Select Effects --- */
+.is-checkable.l-tag--select-effect-color.is-checked {
+  --l-tag-bg: color-mix(in srgb, var(--l-tag-theme-color), black 15%);
+}
+
+.is-checkable.l-tag--select-effect-border.is-checked {
+  box-shadow: 
+    0 1px 2px rgba(0, 0, 0, 0.05),
+    0 0 0 4px color-mix(in srgb, var(--l-tag-theme-color), transparent 70%);
+}
+
+.is-checkable.l-tag--select-effect-mark.is-checked::before {
+  content: '';
+  display: inline-flex;
+  width: 4px;
+  height: 8px;
+  border-bottom: 1.5px solid currentColor;
+  border-right: 1.5px solid currentColor;
+  transform: rotate(45deg);
+  margin-right: 5px;
+  margin-top: -2px;
+  flex-shrink: 0;
+}
+
+.l-tag.is-checkable:not(.is-disabled):hover {
+  transform: translateY(-1px);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+}
+
+/* --- Sizes --- */
+.l-tag--sm {
+  --l-tag-font-size: 10px;
+  --l-tag-padding: 1px 6px;
+  --l-tag-gap: 3px;
+}
+
+.l-tag--lg {
+  --l-tag-font-size: 12px;
+  --l-tag-padding: 4px 10px;
+  --l-tag-gap: 6px;
+}
+
+/* --- Shapes --- */
+.is-round {
+  --l-tag-radius: var(--l-radius-full);
+}
+
+/* --- States --- */
+.is-clickable {
+  cursor: pointer;
+}
+
+.is-clickable:hover:not(.is-disabled) {
+  opacity: 0.9;
+  transform: translateY(-1px);
+  filter: brightness(1.05);
+}
+
+.is-disabled {
+  cursor: not-allowed;
+  opacity: 0.4;
+  filter: grayscale(0.6);
+}
+
+/* --- Sub-elements --- */
+.l-tag__icon {
+  display: inline-flex;
+  font-size: 1.15em;
+  opacity: 0.9;
+}
+
+.l-tag__close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.3em;
+  height: 1.3em;
+  padding: 0;
+  margin-right: -4px;
+  border: none;
+  background: transparent;
+  color: currentColor;
+  cursor: pointer;
+  border-radius: 50%;
+  transition: all 0.2s;
+  opacity: 0.6;
+}
+
+.l-tag__close:hover {
+  background: color-mix(in srgb, currentColor, transparent 85%);
+  opacity: 1;
+}
+
+.l-tag__close svg {
+  width: 70%;
+  height: 70%;
+}

package/src/time-picker/style/index.css

@@ -0,0 +1,135 @@
+.l-time-panel {
+  --l-tp-primary: var(--l-color-primary);
+  --l-tp-bg: var(--l-bg-surface);
+  --l-tp-text: var(--l-text-main);
+  --l-tp-text-muted: var(--l-text-muted);
+  --l-tp-border: var(--l-control-border);
+  --l-tp-radius: var(--l-radius-overlay);
+
+  /* Calculated Hover Colors */
+  --l-tp-hover-bg: var(--l-bg-selected);
+  --l-tp-hover-text: var(--l-text-selected);
+}
+
+.l-time-panel {
+  --l-tp-height: 224px;
+  position: relative;
+  display: flex;
+  height: var(--l-tp-height);
+  background: var(--l-tp-bg);
+  border-radius: var(--l-tp-radius);
+  overflow: hidden;
+  user-select: none;
+}
+
+.l-time-panel__column {
+  flex: 1;
+  min-width: 56px;
+  overflow-y: auto;
+  scrollbar-width: none;
+  padding: calc((var(--l-tp-height) - 40px) / 2) 0;
+  position: relative;
+  z-index: 1;
+  scroll-snap-type: y mandatory;
+  scroll-behavior: smooth;
+}
+
+.l-time-panel__column::-webkit-scrollbar {
+  display: none;
+}
+
+.l-time-panel__item {
+  height: 40px;
+  line-height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  color: var(--l-tp-text-muted);
+  cursor: pointer;
+  transition: color 0.2s;
+  z-index: 2;
+  scroll-snap-align: center;
+  scroll-snap-stop: always;
+}
+
+.l-time-panel__item:hover:not(.is-selected) {
+  background: var(--l-tp-hover-bg);
+  color: var(--l-tp-hover-text);
+}
+
+.l-time-panel__item.is-selected {
+  color: var(--l-text-selected);
+  font-weight: 600;
+  font-size: 15px;
+}
+
+.l-time-panel__separator {
+  width: 1px;
+  background: var(--l-tp-border);
+  height: 100%;
+  opacity: 0.5;
+}
+
+.l-time-panel__selection {
+  position: absolute;
+  top: calc((var(--l-tp-height) - 40px) / 2);
+  left: 8px;
+  right: 8px;
+  height: 40px;
+  background: var(--l-bg-selected);
+  border-radius: 8px;
+  pointer-events: none;
+  z-index: 0;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* --- Sizes Adaptation --- */
+
+/* Small Size */
+.l-time-picker--sm .l-time-panel {
+  --l-tp-height: 180px;
+}
+
+.l-time-picker--sm .l-time-panel__item {
+  height: 32px;
+  line-height: 32px;
+  font-size: 12px;
+}
+
+.l-time-picker--sm .l-time-panel__item.is-selected {
+  font-size: 13px;
+}
+
+.l-time-picker--sm .l-time-panel__selection {
+  top: calc((var(--l-tp-height) - 32px) / 2);
+  height: 32px;
+}
+
+.l-time-picker--sm .l-time-panel__column {
+  padding: calc((var(--l-tp-height) - 32px) / 2) 0;
+}
+
+/* Large Size */
+.l-time-picker--lg .l-time-panel {
+  --l-tp-height: 260px;
+}
+
+.l-time-picker--lg .l-time-panel__item {
+  height: 48px;
+  line-height: 48px;
+  font-size: 16px;
+}
+
+.l-time-picker--lg .l-time-panel__item.is-selected {
+  font-size: 17px;
+}
+
+.l-time-picker--lg .l-time-panel__selection {
+  top: calc((var(--l-tp-height) - 48px) / 2);
+  height: 48px;
+}
+
+.l-time-picker--lg .l-time-panel__column {
+  padding: calc((var(--l-tp-height) - 48px) / 2) 0;
+}

package/src/tooltip/style/index.css

@@ -0,0 +1,50 @@
+.l-tooltip {
+  --l-tooltip-bg: rgba(31, 41, 55, 0.95);
+  --l-tooltip-color: #ffffff;
+  --l-tooltip-radius: var(--l-radius-overlay);
+  --l-tooltip-padding: 8px 12px;
+  --l-tooltip-font-size: 13px;
+  --l-tooltip-arrow-size: 6px;
+
+  position: absolute;
+  pointer-events: none;
+  background-color: var(--l-tooltip-bg);
+  color: var(--l-tooltip-color);
+  padding: var(--l-tooltip-padding);
+  border-radius: var(--l-tooltip-radius);
+  font-size: var(--l-tooltip-font-size);
+  box-shadow: var(--l-shadow-overlay);
+  backdrop-filter: blur(8px);
+  max-width: 250px;
+  word-wrap: break-word;
+}
+
+.l-tooltip--light {
+  --l-tooltip-bg: var(--l-bg-surface);
+  --l-tooltip-color: var(--l-text-main);
+  border: var(--l-border-standard);
+  box-shadow: var(--l-shadow-overlay);
+}
+
+.l-tooltip__arrow {
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-style: solid;
+}
+
+/* Tooltip Transitions */
+.l-tooltip-fade-enter-active,
+.l-tooltip-fade-leave-active {
+  transition: opacity 0.2s, transform 0.2s cubic-bezier(0.23, 1, 0.32, 1);
+}
+
+.l-tooltip-fade-enter-from,
+.l-tooltip-fade-leave-to {
+  opacity: 0;
+  transform: scale(0.95) translateY(10px);
+}
+
+.l-tooltip-trigger {
+  display: inline-block;
+}

package/src/transfer/style/index.css

@@ -0,0 +1,181 @@
+.l-transfer {
+  display: flex;
+  align-items: center;
+  gap: 24px;
+  font-size: 14px;
+  height: 320px; /* 赋予默认高度，防止塌陷 */
+}
+
+.l-transfer__buttons {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.l-transfer__buttons .l-button {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.l-transfer__buttons .l-button:not(:disabled) {
+  background: color-mix(in srgb, var(--l-color-primary), transparent 92%);
+  color: var(--l-color-primary);
+  border-color: transparent;
+}
+
+.l-transfer__buttons .l-button:not(:disabled):hover {
+  background: var(--l-color-primary);
+  color: var(--l-color-primary-content);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px color-mix(in srgb, var(--l-color-primary), transparent 70%);
+}
+
+.l-transfer__buttons .l-button .l-icon {
+  font-size: 18px;
+  margin: 0;
+}
+
+.l-transfer.is-disabled {
+  opacity: 0.6;
+  pointer-events: none;
+}
+
+/* Panel Style Overrides (From TransferPanel.vue) */
+.l-transfer-panel {
+  display: flex;
+  flex-direction: column;
+  width: 240px;
+  height: 100%; /* 改为继承高度 */
+  border: var(--l-border-standard);
+  border-radius: var(--l-radius-overlay);
+  background: var(--l-bg-surface);
+  box-shadow: var(--l-shadow-overlay);
+  overflow: hidden;
+  transition: all 0.3s ease;
+}
+
+.l-transfer-panel:hover {
+  border-color: var(--l-color-primary);
+  box-shadow: var(--l-shadow-overlay);
+}
+
+.l-transfer-panel__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 16px;
+  height: 44px;
+  background: var(--l-bg-subtle);
+  border-bottom: var(--l-border-standard);
+}
+
+.l-transfer-panel__header .l-checkbox__label {
+  font-weight: 600;
+  font-size: 14px;
+  color: var(--l-text-main);
+}
+
+.l-transfer-panel__header-count {
+  font-size: 12px;
+  color: var(--l-text-muted);
+  font-weight: 500;
+}
+
+.l-transfer-panel__filter {
+  padding: 10px 12px;
+}
+
+.l-transfer-panel__body {
+  flex: 1;
+  position: relative;
+  overflow: hidden;
+}
+
+.l-transfer-panel__list {
+  margin: 0;
+  padding: 6px 0;
+  list-style: none;
+}
+
+.l-transfer-panel__item {
+  display: flex;
+  align-items: center;
+  padding: 0 16px;
+  height: 36px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.l-transfer-panel__item:hover:not(.is-disabled) {
+  background: color-mix(in srgb, var(--l-color-primary), transparent 92%);
+}
+
+.l-transfer-panel__item .l-checkbox {
+  width: 100%;
+}
+
+.l-transfer-panel__item.is-disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.l-transfer-panel__empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: var(--l-text-muted);
+  font-size: 13px;
+  font-style: italic;
+}
+
+.l-transfer-panel__footer {
+  padding: 10px;
+  border-top: var(--l-border-standard);
+  background: var(--l-bg-subtle);
+}
+
+/* Original Panel Overrides in Transfer.vue */
+.l-transfer__panel .l-checkbox {
+  margin-right: 0;
+}
+
+.l-transfer__panel .l-checkbox__label {
+  padding-left: 8px;
+}
+
+/* --- Sizes / Density Adaptation --- */
+
+/* Small Density (sm) */
+.l-transfer--sm .l-transfer-panel__item {
+  height: 32px;
+}
+
+.l-transfer--sm .l-transfer__buttons .l-button {
+  width: 32px;
+  height: 32px;
+}
+
+.l-transfer--sm .l-transfer__buttons .l-button .l-icon {
+  font-size: 14px;
+}
+
+/* Large Density (lg) */
+.l-transfer--lg .l-transfer-panel__item {
+  height: 44px;
+}
+
+.l-transfer--lg .l-transfer__buttons .l-button {
+  width: 48px;
+  height: 48px;
+}
+
+.l-transfer--lg .l-transfer__buttons .l-button .l-icon {
+  font-size: 22px;
+}