vitrify 0.18.4 → 0.19.0

package/src/node/plugins/quasar/unocss/styles/md3/components/QScrollarea.unocss.ts

@@ -0,0 +1,60 @@
+import type { Rule, UserShortcuts } from '@unocss/core'
+import type { QuasarTheme } from '../../../theme.js'
+
+const shortcuts: UserShortcuts<QuasarTheme> = [
+  [/^q-scrollarea$/, ([, c], { theme }) => `relative`],
+
+  [
+    /^q-scrollarea__bar$/,
+    ([, c], { theme }) =>
+      theme.quasar?.components?.['q-scrollarea__bar'] ??
+      `opacity-20 [transition:opacity_0.3s]`
+  ],
+
+  [
+    /^q-scrollarea__thumb$/,
+    ([, c], { theme }) =>
+      theme.quasar?.components?.['q-scrollarea__thumb'] ??
+      `opacity-20 [transition:opacity_0.3s] bg-[#000] rounded-[3px]`
+  ],
+
+  [/^q-scrollarea__bar--v$/, ([, c], { theme }) => `right-0 w-[10px]`],
+
+  [/^q-scrollarea__thumb--v$/, ([, c], { theme }) => `right-0 w-[10px]`],
+
+  [/^q-scrollarea__bar--h$/, ([, c], { theme }) => `bottom-0 h-[10px]`],
+
+  [/^q-scrollarea__thumb--h$/, ([, c], { theme }) => `bottom-0 h-[10px]`],
+
+  [
+    /^q-scrollarea__bar--invisible$/,
+    ([, c], { theme }) =>
+      theme.quasar?.components?.['q-scrollarea__bar--invisible'] ??
+      `!opacity-0 pointer-events-none`
+  ],
+
+  [
+    /^q-scrollarea__thumb--invisible$/,
+    ([, c], { theme }) =>
+      theme.quasar?.components?.['q-scrollarea__thumb--invisible'] ??
+      `!opacity-0 pointer-events-none`
+  ],
+
+  [/^q-scrollarea__thumb:hover$/, ([, c], { theme }) => `hover:opacity-30`],
+
+  [/^q-scrollarea__thumb:active$/, ([, c], { theme }) => `active:opacity-50`],
+
+  [
+    /^q-scrollarea__content$/,
+    ([, c], { theme }) => `!relative min-h-full min-w-full`
+  ],
+
+  [
+    /^q-scrollarea--dark$/,
+    ([, c], { theme }) =>
+      theme.quasar?.components?.['q-scrollarea--dark'] ??
+      `[&_.q-scrollarea\\_\\_thumb]:(bg-[#fff])`
+  ]
+]
+
+export { shortcuts }

package/src/node/plugins/quasar/unocss/styles/md3/components/QSelect.unocss.ts

@@ -0,0 +1,81 @@
+import type { Preflight, Rule, UserShortcuts } from '@unocss/core'
+import type { QuasarTheme } from '../../../theme.js'
+
+const preflights: Preflight<QuasarTheme>[] = [
+  {
+    getCSS: ({ theme }) => `
+body.mobile:not(.native-mobile) .q-select__dialog {
+  max-height: calc(100vh - 108px) !important;
+}
+
+body.platform-android.native-mobile .q-dialog__inner--top .q-select__dialog {
+  max-height: calc(100vh - 24px) !important;
+}
+body.platform-android:not(.native-mobile) .q-dialog__inner--top .q-select__dialog {
+  max-height: calc(100vh - 80px) !important;
+}
+
+body.platform-ios.native-mobile .q-dialog__inner--top > div {
+  border-radius: 4px;
+}
+body.platform-ios.native-mobile .q-dialog__inner--top .q-select__dialog--focused {
+  max-height: 47vh !important;
+}
+body.platform-ios:not(.native-mobile) .q-dialog__inner--top .q-select__dialog--focused {
+  max-height: 50vh !important;
+}`
+  }
+]
+
+const shortcuts: UserShortcuts<QuasarTheme> = [
+  [
+    /^q-select--without-input$/,
+    ([, c], { theme }) =>
+      theme.quasar?.components?.['q-select--without-input'] ??
+      `[&_.q-field\\_\\_control]:(cursor-pointer)`
+  ],
+
+  [
+    /^q-select--with-input$/,
+    ([, c], { theme }) =>
+      theme.quasar?.components?.['q-select--with-input'] ??
+      `[&_.q-field\\_\\_control]:(cursor-text)`
+  ],
+
+  [
+    /^q-select$/,
+    ([, c], { theme }) =>
+      theme.quasar?.components?.['q-select'] ??
+      `[&_.q-field\\_\\_input]:(!min-w-[50px] cursor-text) [&_.q-field\\_\\_input--padding]:(pl-[4px])`
+  ],
+
+  [
+    /^q-select__focus-target$/,
+    ([, c], { theme }) =>
+      theme.quasar?.components?.['q-select__focus-target'] ??
+      `absolute !outline-0 w-px h-px p-0 border-0 opacity-0`
+  ],
+
+  [
+    /^q-select__autocomplete-input$/,
+    ([, c], { theme }) =>
+      theme.quasar?.components?.['q-select__autocomplete-input'] ??
+      `absolute !outline-0 w-px h-px p-0 border-0 opacity-0`
+  ],
+
+  [
+    /^q-select__dropdown-icon$/,
+    ([, c], { theme }) =>
+      theme.quasar?.components?.['q-select__dropdown-icon'] ??
+      `cursor-pointer [transition:transform_0.28s]`
+  ],
+
+  [
+    /^q-select__dialog$/,
+    ([, c], { theme }) =>
+      theme.quasar?.components?.['q-select__dialog'] ??
+      `!w-[90vw] !max-w-[90vw] !max-h-[calc(100vh-70px)] bg-[#fff] flex flex-col [&_>_.scroll]:(relative [background:inherit])`
+  ]
+]
+
+export { preflights, shortcuts }

package/src/node/plugins/quasar/unocss/styles/md3/components/QSeparator.unocss.ts

@@ -0,0 +1,48 @@
+import type { Rule, UserShortcuts } from '@unocss/core'
+import type { QuasarTheme } from '../../../theme.js'
+
+const shortcuts: UserShortcuts<QuasarTheme> = [
+  [
+    /^q-separator$/,
+    ([, c], { theme }) =>
+      theme.quasar?.components?.['q-separator'] ??
+      `border-0 bg-[rgba(0,_0,_0,_0.12)] m-0 [transition:background_0.3s,_opacity_0.3s] flex-shrink-0`
+  ],
+
+  [
+    /^q-separator--dark$/,
+    ([, c], { theme }) =>
+      theme.quasar?.components?.['q-separator--dark'] ??
+      `bg-[rgba(255,_255,_255,_0.28)]`
+  ],
+
+  [/^q-separator--horizontal$/, ([, c], { theme }) => `block h-px`],
+
+  [
+    /^q-separator--horizontal-inset$/,
+    ([, c], { theme }) =>
+      theme.quasar?.components?.['q-separator--horizontal-inset'] ??
+      `ml-[16px] mr-[16px]`
+  ],
+
+  [
+    /^q-separator--horizontal-item-inset$/,
+    ([, c], { theme }) =>
+      theme.quasar?.components?.['q-separator--horizontal-item-inset'] ??
+      `ml-[72px] mr-0`
+  ],
+
+  [
+    /^q-separator--horizontal-item-thumbnail-inset$/,
+    ([, c], { theme }) =>
+      theme.quasar?.components?.[
+        'q-separator--horizontal-item-thumbnail-inset'
+      ] ?? `ml-[116px] mr-0`
+  ],
+
+  [/^q-separator--vertical$/, ([, c], { theme }) => `w-px h-auto self-stretch`],
+
+  [/^q-separator--vertical-inset$/, ([, c], { theme }) => `mt-[8px] mb-[8px]`]
+]
+
+export { shortcuts }

package/src/node/plugins/quasar/unocss/styles/md3/components/QSkeleton.unocss.ts

@@ -0,0 +1,232 @@
+import type { Preflight, Rule, UserShortcuts } from '@unocss/core'
+import type { QuasarTheme } from '../../../theme.js'
+
+const preflights: Preflight<QuasarTheme>[] = [
+  {
+    getCSS: ({ theme }) => `
+@keyframes q-skeleton--fade {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@keyframes q-skeleton--pulse {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(0.85);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+@keyframes q-skeleton--pulse-x {
+  0% {
+    transform: scaleX(1);
+  }
+  50% {
+    transform: scaleX(0.75);
+  }
+  100% {
+    transform: scaleX(1);
+  }
+}
+@keyframes q-skeleton--pulse-y {
+  0% {
+    transform: scaleY(1);
+  }
+  50% {
+    transform: scaleY(0.75);
+  }
+  100% {
+    transform: scaleY(1);
+  }
+}
+@keyframes q-skeleton--wave {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}`
+  }
+]
+
+const shortcuts: UserShortcuts<QuasarTheme> = [
+  [
+    /^q-skeleton$/,
+    ([, c], { theme }) =>
+      theme.quasar?.components?.['q-skeleton'] ??
+      `bg-[rgba(0,_0,_0,_0.12)] rounded-[4px] box-border [&:before]:(content-['_'])`
+  ],
+
+  [
+    /^q-skeleton--anim$/,
+    ([, c], { theme }) =>
+      theme.quasar?.components?.['q-skeleton--anim'] ?? `cursor-wait`
+  ],
+
+  [
+    /^q-skeleton--type-text$/,
+    ([, c], { theme }) =>
+      theme.quasar?.components?.['q-skeleton--type-text'] ??
+      `scale-x-100 scale-y-[0.5]`
+  ],
+
+  [
+    /^q-skeleton--type-circle$/,
+    ([, c], { theme }) =>
+      theme.quasar?.components?.['q-skeleton--type-circle'] ??
+      `h-[48px] w-[48px] rounded-[50%]`
+  ],
+
+  [
+    /^q-skeleton--type-QAvatar$/,
+    ([, c], { theme }) =>
+      theme.quasar?.components?.['q-skeleton--type-QAvatar'] ??
+      `h-[48px] w-[48px] rounded-[50%]`
+  ],
+
+  [
+    /^q-skeleton--type-QBtn$/,
+    ([, c], { theme }) =>
+      theme.quasar?.components?.['q-skeleton--type-QBtn'] ?? `w-[90px] h-[36px]`
+  ],
+
+  [
+    /^q-skeleton--type-QBadge$/,
+    ([, c], { theme }) =>
+      theme.quasar?.components?.['q-skeleton--type-QBadge'] ??
+      `w-[70px] h-[16px]`
+  ],
+
+  [
+    /^q-skeleton--type-QChip$/,
+    ([, c], { theme }) =>
+      theme.quasar?.components?.['q-skeleton--type-QChip'] ??
+      `w-[90px] h-[28px] rounded-[16px]`
+  ],
+
+  [
+    /^q-skeleton--type-QToolbar$/,
+    ([, c], { theme }) =>
+      theme.quasar?.components?.['q-skeleton--type-QToolbar'] ?? `h-[50px]`
+  ],
+
+  [
+    /^q-skeleton--type-QCheckbox$/,
+    ([, c], { theme }) =>
+      theme.quasar?.components?.['q-skeleton--type-QCheckbox'] ??
+      `w-[40px] h-[40px] rounded-[50%]`
+  ],
+
+  [
+    /^q-skeleton--type-QRadio$/,
+    ([, c], { theme }) =>
+      theme.quasar?.components?.['q-skeleton--type-QRadio'] ??
+      `w-[40px] h-[40px] rounded-[50%]`
+  ],
+
+  [
+    /^q-skeleton--type-QToggle$/,
+    ([, c], { theme }) =>
+      theme.quasar?.components?.['q-skeleton--type-QToggle'] ??
+      `w-[56px] h-[40px] rounded-[7px]`
+  ],
+
+  [
+    /^q-skeleton--type-QSlider$/,
+    ([, c], { theme }) =>
+      theme.quasar?.components?.['q-skeleton--type-QSlider'] ?? `h-[40px]`
+  ],
+
+  [
+    /^q-skeleton--type-QRange$/,
+    ([, c], { theme }) =>
+      theme.quasar?.components?.['q-skeleton--type-QRange'] ?? `h-[40px]`
+  ],
+
+  [
+    /^q-skeleton--type-QInput$/,
+    ([, c], { theme }) =>
+      theme.quasar?.components?.['q-skeleton--type-QInput'] ?? `h-[56px]`
+  ],
+
+  [
+    /^q-skeleton--bordered$/,
+    ([, c], { theme }) =>
+      theme.quasar?.components?.['q-skeleton--bordered'] ??
+      `border-[1px] border-solid border-[rgba(0,0,0,0.05)]`
+  ],
+
+  [
+    /^q-skeleton--square$/,
+    ([, c], { theme }) =>
+      theme.quasar?.components?.['q-skeleton--square'] ?? `rounded-none`
+  ],
+
+  [
+    /^q-skeleton--anim-fade$/,
+    ([, c], { theme }) =>
+      theme.quasar?.components?.['q-skeleton--anim-fade'] ??
+      `animate-[q-skeleton--fade_var(--q-skeleton-speed)_linear_0.5s_infinite]`
+  ],
+
+  [
+    /^q-skeleton--anim-pulse$/,
+    ([, c], { theme }) =>
+      theme.quasar?.components?.['q-skeleton--anim-pulse'] ??
+      `animate-[q-skeleton--pulse_var(--q-skeleton-speed)_ease-in-out_0.5s_infinite]`
+  ],
+
+  [
+    /^q-skeleton--anim-pulse-x$/,
+    ([, c], { theme }) =>
+      theme.quasar?.components?.['q-skeleton--anim-pulse-x'] ??
+      `animate-[q-skeleton--pulse-x_var(--q-skeleton-speed)_ease-in-out_0.5s_infinite]`
+  ],
+
+  [
+    /^q-skeleton--anim-pulse-y$/,
+    ([, c], { theme }) =>
+      theme.quasar?.components?.['q-skeleton--anim-pulse-y'] ??
+      `animate-[q-skeleton--pulse-y_var(--q-skeleton-speed)_ease-in-out_0.5s_infinite]`
+  ],
+
+  [
+    /^q-skeleton--anim-wave$/,
+    ([, c], { theme }) =>
+      theme.quasar?.components?.['q-skeleton--anim-wave'] ??
+      `relative overflow-hidden [&:after]:(content-[''] absolute top-[0] right-[0] bottom-[0] left-[0] z-0) [&:after]:(bg-[linear-gradient(_90deg,_rgba(255,_255,_255,_0),_rgba(255,_255,_255,_0.5),_rgba(255,_255,_255,_0)_)] animate-[q-skeleton--wave_var(--q-skeleton-speed)_linear_0.5s_infinite])`
+  ],
+
+  [
+    /^q-skeleton--anim-blink$/,
+    ([, c], { theme }) =>
+      theme.quasar?.components?.['q-skeleton--anim-blink'] ??
+      `relative overflow-hidden [&:after]:(content-[''] absolute top-[0] right-[0] bottom-[0] left-[0] z-0) [&:after]:(bg-[rgba(255,_255,_255,_0.7)] animate-[q-skeleton--fade_var(--q-skeleton-speed)_linear_0.5s_infinite])`
+  ],
+
+  [
+    /^q-skeleton--anim-pop$/,
+    ([, c], { theme }) =>
+      theme.quasar?.components?.['q-skeleton--anim-pop'] ??
+      `relative overflow-hidden [&:after]:(content-[''] absolute top-[0] right-[0] bottom-[0] left-[0] z-0)`
+  ],
+
+  [
+    /^q-skeleton--dark$/,
+    ([, c], { theme }) =>
+      theme.quasar?.components?.['q-skeleton--dark'] ??
+      `bg-[rgba(255,_255,_255,_0.05)] [&.q-skeleton--bordered]:(border-[1px] border-solid border-[rgba(255,255,255,0.25)]) [&.q-skeleton--anim-wave:after]:(bg-[linear-gradient(_90deg,_rgba(255,_255,_255,_0),_rgba(255,_255,_255,_0.1),_rgba(255,_255,_255,_0)_)]) [&.q-skeleton--anim-blink:after]:(bg-[rgba(255,_255,_255,_0.2)])`
+  ]
+]
+
+export { preflights, shortcuts }

package/src/node/plugins/quasar/unocss/styles/md3/components/QSlideItem.unocss.ts

@@ -0,0 +1,43 @@
+import type { Preflight, Rule, UserShortcuts } from '@unocss/core'
+import type { QuasarTheme } from '../../../theme.js'
+
+const shortcuts: UserShortcuts<QuasarTheme> = [
+  [/^q-slide-item$/, ([, c], { theme }) => `relative bg-[white]`],
+
+  [
+    /^q-slide-item__left$/,
+    ([, c], { theme }) =>
+      theme.quasar?.components?.['q-slide-item__left'] ??
+      `invisible text-[14px] text-[#fff] [&_.q-icon]:(text-[1.714em]) bg-[#4caf50] px-[16px] py-[8px] [&_>_div]:(origin-[left_center])`
+  ],
+
+  [
+    /^q-slide-item__right$/,
+    ([, c], { theme }) =>
+      theme.quasar?.components?.['q-slide-item__right'] ??
+      `invisible text-[14px] text-[#fff] [&_.q-icon]:(text-[1.714em]) bg-[#ff9800] px-[16px] py-[8px] [&_>_div]:(origin-[right_center])`
+  ],
+
+  [
+    /^q-slide-item__top$/,
+    ([, c], { theme }) =>
+      theme.quasar?.components?.['q-slide-item__top'] ??
+      `invisible text-[14px] text-[#fff] [&_.q-icon]:(text-[1.714em]) bg-[#2196f3] px-[8px] py-[16px] [&_>_div]:(origin-[top_center])`
+  ],
+
+  [
+    /^q-slide-item__bottom$/,
+    ([, c], { theme }) =>
+      theme.quasar?.components?.['q-slide-item__bottom'] ??
+      `invisible text-[14px] text-[#fff] [&_.q-icon]:(text-[1.714em]) bg-[#9c27b0] px-[8px] py-[16px] [&_>_div]:(origin-[bottom_center])`
+  ],
+
+  [
+    /^q-slide-item__content$/,
+    ([, c], { theme }) =>
+      theme.quasar?.components?.['q-slide-item__content'] ??
+      `[background:inherit] [transition:transform_0.2s_ease-in] select-none cursor-pointer`
+  ]
+]
+
+export { shortcuts }