@livestorm/ui-vue 1.1.2 → 2.0.0

package/src/global.d.ts

@@ -0,0 +1,181 @@
+import type { RenderSlot } from './utils/slot'
+import type UiActionBar from './components/UiActionBar/UiActionBar.vue'
+import type UiActionBarItem from './components/UiActionBar/UiActionBarItem.vue'
+import type UiActionBarSeparator from './components/UiActionBar/UiActionBarSeparator.vue'
+import type UiAnimatedLogo from './components/UiAnimatedLogo/UiAnimatedLogo.vue'
+import type UiAvatar from './components/UiAvatar/UiAvatar.vue'
+import type UiAvatarList from './components/UiAvatarList/UiAvatarList.vue'
+import type UiBadge from './components/UiBadge/UiBadge.vue'
+import type UiBanner from './components/UiBanner/UiBanner.vue'
+import type UiBreadcrumb from './components/UiBreadcrumb/UiBreadcrumb.vue'
+import type UiButton from './components/UiButton/UiButton.vue'
+import type UiButtonGroup from './components/UiButtonGroup/UiButtonGroup.vue'
+import type UiButtonGroupItem from './components/UiButtonGroup/UiButtonGroupItem.vue'
+import type UiCard from './components/UiCard/UiCard.vue'
+import type UiCarousel from './components/UiCarousel/UiCarousel.vue'
+import type UiColorField from './components/UiColorField/UiColorField.vue'
+import type UiColorPicker from './components/UiColorPicker/UiColorPicker.vue'
+import type UiDialog from './components/UiDialog/UiDialog.vue'
+import type UiDialogClose from './components/UiDialog/UiDialogClose.vue'
+import type UiDialogContent from './components/UiDialog/UiDialogContent.vue'
+import type UiDialogFooter from './components/UiDialog/UiDialogFooter.vue'
+import type UiDialogTrigger from './components/UiDialog/UiDialogTrigger.vue'
+import type UiDropdown from './components/UiDropdown/UiDropdown.vue'
+import type UiDropdownContent from './components/UiDropdown/UiDropdownContent.vue'
+import type UiDropdownItem from './components/UiDropdown/UiDropdownItem.vue'
+import type UiDropdownSeparator from './components/UiDropdown/UiDropdownSeparator.vue'
+import type UiDropdownTrigger from './components/UiDropdown/UiDropdownTrigger.vue'
+import type UiEmptyState from './components/UiEmptyState/UiEmptyState.vue'
+import type UiFieldWrapper from './components/UiFieldWrapper/UiFieldWrapper.vue'
+import type UiFormField from './components/UiForm/UiFormField.vue'
+import type UiHorizontalSeparator from './components/UiHorizontalSeparator/UiHorizontalSeparator.vue'
+import type UiInputCheckbox from './components/UiInputCheckbox/UiInputCheckbox.vue'
+import type UiInputSelect from './components/UiInputSelect/UiInputSelect.vue'
+import type UiInputTextarea from './components/UiInputTextarea/UiInputTextarea.vue'
+import type UiLabel from './components/UiLabel/UiLabel.vue'
+import type UiList from './components/UiList/UiList.vue'
+import type UiListItem from './components/UiListItem/UiListItem.vue'
+import type UiLoader from './components/UiLoader/UiLoader.vue'
+import type UiLogo from './components/UiLogo/UiLogo.vue'
+import type UiMenu from './components/UiMenu/UiMenu.vue'
+import type UiMenuContent from './components/UiMenu/UiMenuContent.vue'
+import type UiMenuGroup from './components/UiMenu/UiMenuGroup.vue'
+import type UiMenuItem from './components/UiMenu/UiMenuItem.vue'
+import type UiMenuLabel from './components/UiMenu/UiMenuLabel.vue'
+import type UiMenuSeparator from './components/UiMenu/UiMenuSeparator.vue'
+import type UiMenuSub from './components/UiMenu/UiMenuSub.vue'
+import type UiMenuSubContent from './components/UiMenu/UiMenuSubContent.vue'
+import type UiMenuSubTrigger from './components/UiMenu/UiMenuSubTrigger.vue'
+import type UiMenuTrigger from './components/UiMenu/UiMenuTrigger.vue'
+import type UiPage from './components/UiPage/UiPage.vue'
+import type UiPageHeader from './components/UiPageHeader/UiPageHeader.vue'
+import type UiPopover from './components/UiPopover/UiPopover.vue'
+import type UiPopoverAnchor from './components/UiPopover/UiPopoverAnchor.vue'
+import type UiPopoverContent from './components/UiPopover/UiPopoverContent.vue'
+import type UiPopoverTrigger from './components/UiPopover/UiPopoverTrigger.vue'
+import type UiProgress from './components/UiProgress/UiProgress.vue'
+import type UiRoomButton from './components/UiRoomButton/UiRoomButton.vue'
+import type UiShell from './components/UiShell/UiShell.vue'
+import type UiSideMenu from './components/UiSideMenu/UiSideMenu.vue'
+import type UiSideMenuBottom from './components/UiSideMenu/UiSideMenuBottom.vue'
+import type UiSideMenuItem from './components/UiSideMenu/UiSideMenuItem.vue'
+import type UiSideMenuItemContent from './components/UiSideMenu/UiSideMenuItemContent.vue'
+import type UiSideMenuTop from './components/UiSideMenu/UiSideMenuTop.vue'
+import type UiStepper from './components/UiStepper/UiStepper.vue'
+import type UiStepperDescription from './components/UiStepper/UiStepperDescription.vue'
+import type UiStepperIndicator from './components/UiStepper/UiStepperIndicator.vue'
+import type UiStepperItem from './components/UiStepper/UiStepperItem.vue'
+import type UiStepperSeparator from './components/UiStepper/UiStepperSeparator.vue'
+import type UiStepperTitle from './components/UiStepper/UiStepperTitle.vue'
+import type UiTable from './components/UiTable/UiTable.vue'
+import type UiTableBody from './components/UiTable/UiTableBody.vue'
+import type UiTableCell from './components/UiTable/UiTableCell.vue'
+import type UiTableHeader from './components/UiTable/UiTableHeader.vue'
+import type UiTableHeaderCell from './components/UiTable/UiTableHeaderCell.vue'
+import type UiTableRow from './components/UiTable/UiTableRow.vue'
+import type UiTabs from './components/UiTabs/UiTabs.vue'
+import type UiTag from './components/UiTag/UiTag.vue'
+import type UiTextField from './components/UiTextField/UiTextField.vue'
+import type UiTimeline from './components/UiTimeline/UiTimeline.vue'
+import type UiTimelineItem from './components/UiTimeline/UiTimelineItem.vue'
+import type UiTooltip from './components/UiTooltip/UiTooltip.vue'
+import type UiTooltipContent from './components/UiTooltip/UiTooltipContent.vue'
+import type UiTooltipProvider from './components/UiTooltip/UiTooltipProvider.vue'
+import type UiTooltipTrigger from './components/UiTooltip/UiTooltipTrigger.vue'
+
+declare module 'vue' {
+  interface ComponentCustomProperties {
+    i18n: {
+      t: (key: string, ...args: unknown[]) => string
+    }
+  }
+
+  export interface GlobalComponents {
+    RenderSlot: typeof RenderSlot
+    UiActionBar: typeof UiActionBar
+    UiActionBarItem: typeof UiActionBarItem
+    UiActionBarSeparator: typeof UiActionBarSeparator
+    UiAnimatedLogo: typeof UiAnimatedLogo
+    UiAvatar: typeof UiAvatar
+    UiAvatarList: typeof UiAvatarList
+    UiBadge: typeof UiBadge
+    UiBanner: typeof UiBanner
+    UiBreadcrumb: typeof UiBreadcrumb
+    UiButton: typeof UiButton
+    UiButtonGroup: typeof UiButtonGroup
+    UiButtonGroupItem: typeof UiButtonGroupItem
+    UiCard: typeof UiCard
+    UiCarousel: typeof UiCarousel
+    UiColorField: typeof UiColorField
+    UiColorPicker: typeof UiColorPicker
+    UiDialog: typeof UiDialog
+    UiDialogClose: typeof UiDialogClose
+    UiDialogContent: typeof UiDialogContent
+    UiDialogFooter: typeof UiDialogFooter
+    UiDialogTrigger: typeof UiDialogTrigger
+    UiDropdown: typeof UiDropdown
+    UiDropdownContent: typeof UiDropdownContent
+    UiDropdownItem: typeof UiDropdownItem
+    UiDropdownSeparator: typeof UiDropdownSeparator
+    UiDropdownTrigger: typeof UiDropdownTrigger
+    UiEmptyState: typeof UiEmptyState
+    UiFieldWrapper: typeof UiFieldWrapper
+    UiFormField: typeof UiFormField
+    UiHorizontalSeparator: typeof UiHorizontalSeparator
+    UiInputCheckbox: typeof UiInputCheckbox
+    UiInputSelect: typeof UiInputSelect
+    UiInputTextarea: typeof UiInputTextarea
+    UiLabel: typeof UiLabel
+    UiList: typeof UiList
+    UiListItem: typeof UiListItem
+    UiLoader: typeof UiLoader
+    UiLogo: typeof UiLogo
+    UiMenu: typeof UiMenu
+    UiMenuContent: typeof UiMenuContent
+    UiMenuGroup: typeof UiMenuGroup
+    UiMenuItem: typeof UiMenuItem
+    UiMenuLabel: typeof UiMenuLabel
+    UiMenuSeparator: typeof UiMenuSeparator
+    UiMenuSub: typeof UiMenuSub
+    UiMenuSubContent: typeof UiMenuSubContent
+    UiMenuSubTrigger: typeof UiMenuSubTrigger
+    UiMenuTrigger: typeof UiMenuTrigger
+    UiPage: typeof UiPage
+    UiPageHeader: typeof UiPageHeader
+    UiPopover: typeof UiPopover
+    UiPopoverAnchor: typeof UiPopoverAnchor
+    UiPopoverContent: typeof UiPopoverContent
+    UiPopoverTrigger: typeof UiPopoverTrigger
+    UiProgress: typeof UiProgress
+    UiRoomButton: typeof UiRoomButton
+    UiShell: typeof UiShell
+    UiSideMenu: typeof UiSideMenu
+    UiSideMenuBottom: typeof UiSideMenuBottom
+    UiSideMenuItem: typeof UiSideMenuItem
+    UiSideMenuItemContent: typeof UiSideMenuItemContent
+    UiSideMenuTop: typeof UiSideMenuTop
+    UiStepper: typeof UiStepper
+    UiStepperDescription: typeof UiStepperDescription
+    UiStepperIndicator: typeof UiStepperIndicator
+    UiStepperItem: typeof UiStepperItem
+    UiStepperSeparator: typeof UiStepperSeparator
+    UiStepperTitle: typeof UiStepperTitle
+    UiTable: typeof UiTable
+    UiTableBody: typeof UiTableBody
+    UiTableCell: typeof UiTableCell
+    UiTableHeader: typeof UiTableHeader
+    UiTableHeaderCell: typeof UiTableHeaderCell
+    UiTableRow: typeof UiTableRow
+    UiTabs: typeof UiTabs
+    UiTag: typeof UiTag
+    UiTextField: typeof UiTextField
+    UiTimeline: typeof UiTimeline
+    UiTimelineItem: typeof UiTimelineItem
+    UiTooltip: typeof UiTooltip
+    UiTooltipContent: typeof UiTooltipContent
+    UiTooltipProvider: typeof UiTooltipProvider
+    UiTooltipTrigger: typeof UiTooltipTrigger
+  }
+}
+
+export {} // Enable type augmentation instead of replacement

package/src/integrations/index.js

@@ -0,0 +1 @@
+export * from '../components/Toast/toastDSV2'

package/src/layouts/index.js

@@ -0,0 +1,5 @@
+import LayoutToasts from '../components/Toast/LayoutToasts.vue'
+
+export {
+  LayoutToasts,
+}

package/src/mixins/DynamicAction.js

@@ -21,6 +21,8 @@ export default {
 
   computed: {
     component () {
+      const isDisabled = this.disabled || this.loading
+
       if (this.to) {
         return {
           is: 'router-link',
@@ -28,14 +30,14 @@ export default {
             to: this.to,
             // @TODO vue3 check if we need to have a replacement for this
             // exact: !this.activePage,
-            disabled: this.disabled,
+            disabled: isDisabled,
           },
         }
       } else if (this.href) {
         return {
           is: 'a',
           props: {
-            href: this.disabled
+            href: isDisabled
               ? undefined
               : this.href,
           },
@@ -50,7 +52,7 @@ export default {
           is: 'button',
           props: {
             type: this.type,
-            disabled: this.disabled,
+            disabled: isDisabled,
           },
         }
       }

package/src/primitives.ts

@@ -0,0 +1,6 @@
+/**
+ * Re-exports of reka-ui headless primitives so application packages can consume
+ * them through the design system instead of depending on reka-ui directly
+ * (reka-ui is a dependency of this package, not of the app packages).
+ */
+export { FocusScope, RovingFocusGroup, RovingFocusItem } from 'reka-ui'

package/src/theme.ts

@@ -0,0 +1 @@
+export type ThemeColorType = 'alert'|'warning'|'info'|'success'

package/src/utils/a11y.ts

@@ -0,0 +1,8 @@
+function focusFirstMenuItem (event: Event) {
+  event.preventDefault()
+  const target = (event.target as HTMLElement).closest('[role="menu"]') || event.target as HTMLElement
+  const firstLink = target.querySelector('a')
+  firstLink?.focus()
+}
+
+export { focusFirstMenuItem }

package/src/utils/{breakpoints.js → breakpoints.ts}

@@ -6,3 +6,4 @@ export const BREAKPOINT_MD = 768
 export const BREAKPOINT_LG = 1024
 export const BREAKPOINT_XL = 1280
 export const BREAKPOINT_XL_PLUS = 1366
+export const BREAKPOINT_2XL = 1536

package/src/utils/clipboard.js

@@ -9,14 +9,14 @@ export function useCopyToClipboard () {
 
   const canCopy = computed(() => isSupported.value && permissionClipboardWrite.value)
 
-  async function copy (text, el) {
+  async function copy (text, el, tooltipText = i18n.t('general_misc_copied-text')) {
     await _copy(text)
 
     if (el) {
       el.classList.add('copied')
       const tooltip = createTooltip(el, {
         triggers: [],
-        content: i18n.t('general_misc_copied-text'),
+        content: tooltipText,
         delay: 0,
       })
       tooltip.show()

package/src/utils/devices.js

@@ -1,4 +1,3 @@
-// eslint-disable-next-line
 const REGEX_MOBILE1 = /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|FBAN|FBAV|fennec|hiptop|iemobile|ip(hone|od)|Instagram|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i
 
 // eslint-disable-next-line
@@ -8,12 +7,10 @@ function isMobile (a) {
   return REGEX_MOBILE1.test(a) || REGEX_MOBILE2.test(a.slice(0, 4))
 }
 
-// eslint-disable-next-line
 const REGEX_MOBILE_OR_TABLET1 = /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|FBAN|FBAV|fennec|hiptop|iemobile|ip(hone|od)|Instagram|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i
 // eslint-disable-next-line
 const REGEX_MOBILE_OR_TABLET2 = /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i
 
-// eslint-disable-next-line
 const REGEX_CRAWLER = /Googlebot\/|Googlebot-Mobile|Googlebot-Image|Googlebot-News|Googlebot-Video|AdsBot-Google([^-]|$)|AdsBot-Google-Mobile|Feedfetcher-Google|Mediapartners-Google|Mediapartners \(Googlebot\)|APIs-Google|bingbot|Slurp|[wW]get|LinkedInBot|Python-urllib|python-requests|aiohttp|httpx|libwww-perl|httpunit|nutch|Go-http-client|phpcrawl|msnbot|jyxobot|FAST-WebCrawler|FAST Enterprise Crawler|BIGLOTRON|Teoma|convera|seekbot|Gigabot|Gigablast|exabot|ia_archiver|GingerCrawler|webmon |HTTrack|grub.org|UsineNouvelleCrawler|antibot|netresearchserver|speedy|fluffy|findlink|msrbot|panscient|yacybot|AISearchBot|ips-agent|tagoobot|MJ12bot|woriobot|yanga|buzzbot|mlbot|YandexBot|YandexImages|YandexAccessibilityBot|YandexMobileBot|YandexMetrika|YandexTurbo|YandexImageResizer|YandexVideo|YandexAdNet|YandexBlogs|YandexCalendar|YandexDirect|YandexFavicons|YaDirectFetcher|YandexForDomain|YandexMarket|YandexMedia|YandexMobileScreenShotBot|YandexNews|YandexOntoDB|YandexPagechecker|YandexPartner|YandexRCA|YandexSearchShop|YandexSitelinks|YandexSpravBot|YandexTracker|YandexVertis|YandexVerticals|YandexWebmaster|YandexScreenshotBot|purebot|Linguee Bot|CyberPatrol|voilabot|Baiduspider|citeseerxbot|spbot|twengabot|postrank|TurnitinBot|scribdbot|page2rss|sitebot|linkdex|Adidxbot|ezooms|dotbot|Mail.RU_Bot|discobot|heritrix|findthatfile|europarchive.org|NerdByNature.Bot|sistrix crawler|Ahrefs(Bot|SiteAudit)|fuelbot|CrunchBot|IndeedBot|mappydata|woobot|ZoominfoBot|PrivacyAwareBot|Multiviewbot|SWIMGBot|Grobbot|eright|Apercite|semanticbot|Aboundex|domaincrawler|wbsearchbot|summify|CCBot|edisterbot|seznambot|ec2linkfinder|gslfbot|aiHitBot|intelium_bot|facebookexternalhit|Yeti|RetrevoPageAnalyzer|lb-spider|Sogou|lssbot|careerbot|wotbox|wocbot|ichiro|DuckDuckBot|lssrocketcrawler|drupact|webcompanycrawler|acoonbot|openindexspider|gnam gnam spider|web-archive-net.com.bot|backlinkcrawler|coccoc|integromedb|content crawler spider|toplistbot|it2media-domain-crawler|ip-web-crawler.com|siteexplorer.info|elisabot|proximic|changedetection|arabot|WeSEE:Search|niki-bot|CrystalSemanticsBot|rogerbot|360Spider|psbot|InterfaxScanBot|CC Metadata Scaper|g00g1e.net|GrapeshotCrawler|urlappendbot|brainobot|fr-crawler|binlar|SimpleCrawler|Twitterbot|cXensebot|smtbot|bnf.fr_bot|A6-Indexer|ADmantX|Facebot|OrangeBot\/|memorybot|AdvBot|MegaIndex|SemanticScholarBot|ltx71|nerdybot|xovibot|BUbiNG|Qwantify|archive.org_bot|Applebot|TweetmemeBot|crawler4j|findxbot|S[eE][mM]rushBot|yoozBot|lipperhey|Y!J|Domain Re-Animator Bot|AddThis|Screaming Frog SEO Spider|MetaURI|Scrapy|Livelap[bB]ot|OpenHoseBot|CapsuleChecker|collection@infegy.com|IstellaBot|DeuSu\/|betaBot|Cliqzbot\/|MojeekBot\/|netEstate NE Crawler|SafeSearch microdata crawler|Gluten Free Crawler\/|Sonic|Sysomos|Trove|deadlinkchecker|Slack-ImgProxy|Embedly|RankActiveLinkBot|iskanie|SafeDNSBot|SkypeUriPreview|Veoozbot|Slackbot|redditbot|datagnionbot|Google-Adwords-Instant|adbeat_bot|WhatsApp|contxbot|pinterest.com.bot|electricmonk|GarlikCrawler|BingPreview\/|vebidoobot|FemtosearchBot|Yahoo Link Preview|MetaJobBot|DomainStatsBot|mindUpBot|Daum\/|Jugendschutzprogramm-Crawler|Xenu Link Sleuth|Pcore-HTTP|moatbot|KosmioBot|pingdom|AppInsights|PhantomJS|Gowikibot|PiplBot|Discordbot|TelegramBot|Jetslide|newsharecounts|James BOT|Bark[rR]owler|TinEye|SocialRankIOBot|trendictionbot|Ocarinabot|epicbot|Primalbot|DuckDuckGo-Favicons-Bot|GnowitNewsbot|Leikibot|LinkArchiver|YaK\/|PaperLiBot|Digg Deeper|dcrawl|Snacktory|AndersPinkBot|Fyrebot|EveryoneSocialBot|Mediatoolkitbot|Luminator-robots|ExtLinksBot|SurveyBot|NING\/|okhttp|Nuzzel|omgili|PocketParser|YisouSpider|um-LN|ToutiaoSpider|MuckRack|Jamie's Spider|AHC\/|NetcraftSurveyAgent|Laserlikebot|^Apache-HttpClient|AppEngine-Google|Jetty|Upflow|Thinklab|Traackr.com|Twurly|Mastodon|http_get|DnyzBot|botify|007ac9 Crawler|BehloolBot|BrandVerity|check_http|BDCbot|ZumBot|EZID|ICC-Crawler|ArchiveBot|^LCC |filterdb.iss.net\/crawler|BLP_bbot|BomboraBot|Buck\/|Companybook-Crawler|Genieo|magpie-crawler|MeltwaterNews|Moreover|newspaper\/|ScoutJet|(^| )sentry\/|StorygizeBot|UptimeRobot|OutclicksBot|seoscanners|Hatena|Google Web Preview|MauiBot|AlphaBot|SBL-BOT|IAS crawler|adscanner|Netvibes|acapbot|Baidu-YunGuanCe|bitlybot|blogmuraBot|Bot.AraTurka.com|bot-pge.chlooe.com|BoxcarBot|BTWebClient|ContextAd Bot|Digincore bot|Disqus|Feedly|Fetch\/|Fever|Flamingo_SearchEngine|FlipboardProxy|g2reader-bot|G2 Web Services|imrbot|K7MLWCBot|Kemvibot|Landau-Media-Spider|linkapediabot|vkShare|Siteimprove.com|BLEXBot\/|DareBoost|ZuperlistBot\/|Miniflux\/|Feedspot|Diffbot\/|SEOkicks|tracemyfile|Nimbostratus-Bot|zgrab|PR-CY.RU|AdsTxtCrawler|Datafeedwatch|Zabbix|TangibleeBot|google-xrawler|axios|Amazon CloudFront|Pulsepoint|CloudFlare-AlwaysOnline|Google-Structured-Data-Testing-Tool|WordupInfoSearch|WebDataStats|HttpUrlConnection|Seekport Crawler|ZoomBot|VelenPublicWebCrawler|MoodleBot|jpg-newsbot|outbrain|W3C_Validator|Validator\.nu|W3C-checklink|W3C-mobileOK|W3C_I18n-Checker|FeedValidator|W3C_CSS_Validator|W3C_Unicorn|Google-PhysicalWeb|Blackboard|ICBot\/|BazQux|Twingly|Rivva|Experibot|awesomecrawler|Dataprovider.com|GroupHigh\/|theoldreader.com|AnyEvent|Uptimebot\.org|Nmap Scripting Engine|2ip.ru|Clickagy|Caliperbot|MBCrawler|online-webceo-bot|B2B Bot|AddSearchBot|Google Favicon|HubSpot|Chrome-Lighthouse|HeadlessChrome|CheckMarkNetwork\/|www\.uptime\.com|Streamline3Bot\/|serpstatbot\/|MixnodeCache\/|^curl|SimpleScraper|RSSingBot|Jooblebot|fedoraplanet|Friendica|NextCloud|Tiny Tiny RSS|RegionStuttgartBot|Bytespider|Datanyze|Google-Site-Verification|TrendsmapResolver|tweetedtimes|NTENTbot|Gwene|SimplePie|SearchAtlas|Superfeedr|feedbot|UT-Dorkbot|Amazonbot|SerendeputyBot|Eyeotabot|officestorebot|Neticle Crawler|SurdotlyBot|LinkisBot|AwarioSmartBot|AwarioRssBot|RyteBot|FreeWebMonitoring SiteChecker|AspiegelBot|NAVER Blog Rssbot|zenback bot|SentiBot|Domains Project\/|Pandalytics|VKRobot|bidswitchbot|tigerbot|NIXStatsbot|Atom Feed Robot|Curebot|PagePeeker\/|Vigil\/|rssbot\/|startmebot\/|JobboerseBot|seewithkids|NINJA bot|Cutbot|BublupBot|BrandONbot|RidderBot|Taboolabot|Dubbotbot|FindITAnswersbot|infoobot|Refindbot|BlogTraffic\/\d\.\d+ Feed-Fetcher|SeobilityBot|Cincraw|Dragonbot|VoluumDSP-content-bot|FreshRSS|BitBot|^PHP-Curl-Class|Google-Certificates-Bridge/
 
 function isMobileOrTablet (a) {

package/src/utils/index.js

@@ -3,6 +3,7 @@ export * from './bus.js'
 export * from './clipboard.js'
 export * from './responsive.js'
 export * from './router.js'
-export * from './slot.js'
+export * from './slot'
 export * from './stack-view.js'
 export * from './uid'
+export * from './a11y'

package/src/utils/numbers.ts

@@ -0,0 +1,61 @@
+function preventLessThanZero (num: number): number {
+  return Math.max(num, 0)
+}
+
+interface CustomNumberFormatOptions {
+  allowNegative?: boolean
+}
+
+function formatNumber (num: number, customOptions?: CustomNumberFormatOptions, passthroughOptions?: Intl.NumberFormatOptions): string {
+  const { allowNegative = true } = customOptions || {}
+  if (!allowNegative) {
+    num = preventLessThanZero(num)
+  }
+  return num.toLocaleString(undefined, passthroughOptions)
+}
+
+interface PercentageFormatOptions {
+  /**
+   * Number of decimal places to display
+   * @default 0
+   */
+  decimals?: number
+  /**
+   * Whether to clamp the value between 0 and 100
+   * @default true
+   */
+  clamp?: boolean
+  /**
+   * Value to return if the percentage is NaN or invalid
+   * @default 0
+   */
+  fallback?: number
+}
+
+/**
+ * Formats a percentage value, handling NaN and invalid cases
+ * @param value - The percentage value to format
+ * @param options - Formatting options
+ * @returns Formatted percentage as a number (without the % symbol)
+ */
+function formatPercentage (value: number | undefined | null, options?: PercentageFormatOptions): number {
+  const { decimals = 0, clamp = true, fallback = 0 } = options || {}
+
+  // Handle invalid values
+  if (value === undefined || value === null || isNaN(value) || !isFinite(value)) {
+    return fallback
+  }
+
+  // Round to specified decimal places
+  const multiplier = Math.pow(10, decimals)
+  let result = Math.round(value * multiplier) / multiplier
+
+  // Clamp between 0 and 100 if requested
+  if (clamp) {
+    result = Math.max(0, Math.min(100, result))
+  }
+
+  return result
+}
+
+export { formatNumber, formatPercentage, preventLessThanZero }

package/src/utils/responsive.types.ts

@@ -0,0 +1,12 @@
+/**
+ * Shape of the `$responsive` global property installed by the responsive
+ * plugin (see ./responsive.js).
+ */
+export type ResponsiveGlobalComponentProperty = {
+  width: number
+  height: number
+  mobile: boolean
+  tablet: boolean
+  smallDesktop: boolean
+  desktop: boolean
+}

package/src/utils/{slot.js → slot.ts}

@@ -3,14 +3,17 @@ import { useSlots, isVNode, Comment, Fragment } from 'vue'
 export function useSlotsAsComponents () {
   const slots = useSlots()
   const proxy = new Proxy(slots, {
+    // @ts-expect-error
     get: (target, key) => (...args) => getSlotAsComponent(target[key]?.(...args)),
   })
   return proxy
 }
 
 // from https://github.com/vuejs/core/blob/25f7a16a6eccbfa8d857977dcf1f23fb36b830b5/packages/runtime-core/src/helpers/renderSlot.ts#L84-L97
+// @ts-expect-error
 export function getSlotAsComponent (vnodes) {
   if (!vnodes) return null
+  // @ts-expect-error
   return vnodes.some(child => {
     if (!isVNode(child)) return true
     if (child.type === Comment) return false
@@ -23,5 +26,19 @@ export function getSlotAsComponent (vnodes) {
     ? vnodes
     : null
 }
-
+// @ts-expect-error
 export const RenderSlot = ({ vnodes }) => vnodes
+
+// @ts-expect-error
+export function unwrapFragments (vnodes) {
+  if (!vnodes) return null
+  // @ts-expect-error
+  return vnodes.map(child => {
+    if (!isVNode(child)) return child
+    // RenderSlot
+    if (child.props?.vnodes) return unwrapFragments(child.props.vnodes)
+    // Fragment
+    if (child.type === Fragment) return unwrapFragments(child.children)
+    return child
+  }).flat(10)
+}

package/style.js

@@ -1,12 +1,3 @@
-import './src/css/tailwind.postcss'
-
-import '@livestorm/design-tokens/css/variables.css'
-
-import './src/css/body.postcss'
-
-import './src/css/transitions.postcss'
-import './src/css/loader.postcss'
-import './src/css/button.postcss'
-import './src/css/icon.postcss'
-import './src/css/checkbox-radio.postcss'
-import './src/css/popper.postcss'
+import './src/css/body.css'
+import './src/css/transitions.css'
+import './src/css/reka-animations.css'

package/theme.d.ts

@@ -0,0 +1 @@
+export type { ThemeColorType } from './src/theme'

package/.env

@@ -1 +0,0 @@
-VITE_UI_VUE=true

package/.eslintignore

@@ -1,4 +0,0 @@
-node_modules/
-dist/
-coverage/
-!.*

package/.eslintrc.js

@@ -1,47 +0,0 @@
-module.exports = {
-  root: true,
-  parser: 'vue-eslint-parser',
-  parserOptions: {
-    parser: '@typescript-eslint/parser',
-  },
-  extends: [
-    'plugin:vue/vue3-recommended',
-    '@vue/eslint-config-standard',
-    'plugin:vitest-globals/recommended',
-    '@vue/typescript',
-  ],
-  env: {
-    node: true,
-    mocha: true,
-    'vitest-globals/env': true,
-  },
-  rules: {
-    'no-console': 'off',
-    'no-debugger': 'off',
-    'comma-dangle': ['error', {
-      arrays: 'always-multiline',
-      objects: 'always-multiline',
-      imports: 'always-multiline',
-      exports: 'always-multiline',
-      functions: 'only-multiline',
-    }],
-    'vue/no-v-html': 'off',
-    // html-quotes off: Allow :query='gql => gql`query { foo (bar: "text with quotes") }`' as GraphQL only support double quotes (") for text in queries
-    'vue/html-quotes': 'off',
-    'vue/no-unsupported-features': ['warn', {
-      version: '^3.2.30',
-      ignores: [],
-    }],
-    'vue/multi-word-component-names': 'warn',
-    'import/export': 'off',
-    'no-use-before-define': 'off',
-  },
-  overrides: [
-    {
-      files: ['**/*.vue'],
-      rules: {
-        'import/first': 'off',
-      },
-    },
-  ],
-}

package/.pkg

@@ -1,11 +0,0 @@
-target: //ui-vue
-context: //..
-name: ui-vue
-description: Library for building Livestorm frontend
-template: empty
-owners: ["@livestorm/chapter-front-end"]
-namespaced: false
-runtime_dependencies: []
-submodule: true
-labels:
-  - livestorm-app

package/babel.config.js

@@ -1,5 +0,0 @@
-module.exports = {
-  presets: [
-    '@vue/cli-plugin-babel/preset',
-  ],
-}

package/build/Dockerfile

@@ -1,31 +0,0 @@
-FROM public.ecr.aws/docker/library/node:16-alpine as base
-
-# Setup PNPM
-
-RUN corepack enable && corepack prepare pnpm@8.6.0 --activate
-
-WORKDIR /app
-
-# @TODO improve CI
-# COPY . .
-COPY package.json pnpm-lock.yaml pnpm-workspace.yaml .
-COPY packages/ui-icons/package.json packages/ui-icons/
-COPY packages/ui-vue/package.json packages/ui-vue/
-# Needed for the depedencies (for example postcss.config.js)
-COPY packages/frontend/package.json packages/frontend/
-COPY packages/dev-utils/package.json packages/dev-utils/
-
-# NPM dependencies
-
-RUN --mount=type=cache,id=pnpm-store,target=/root/.local/share/pnpm/store/v3 \
-  pnpm install --frozen-lockfile --ignore-scripts --prefer-offline --filter "@livestorm/ui-vue..." --filter "@livestorm/frontend..."
-
-COPY packages/ui-icons packages/ui-icons
-COPY packages/ui-vue packages/ui-vue
-# Needed for the references to '../frontend'
-COPY packages/frontend/ packages/frontend/
-
-RUN pnpm run -r --filter "@livestorm/ui-vue..." prepare && \
-    pnpm run -r --filter "@livestorm/ui-vue^..." build
-
-WORKDIR /app/packages/ui-vue

package/ci/ci.yml

@@ -1,54 +0,0 @@
-steps:
-  - label: ":docker: Build package (base)"
-    key: build-base
-    agents:
-      queue: "elastic-builders"
-    plugins:
-      - livestorm/lsc#v1.0.32:
-          build-package: true
-          build-target: base
-          build-cache-from:
-            - ${PACKAGE_REGISTRY}/${PACKAGE_IMAGE_NAME}:latest
-
-  - label: ":eslint: Run ESLint"
-    depends_on: build-base
-    command: |
-      pnpm run test:eslint
-    plugins:
-      - docker#v4.0.0:
-          image: "${PACKAGE_IMAGE}-base"
-          skip-checkout: true
-          mount-checkout: false
-
-  - label: ":typescript: Run TypeScript check"
-    depends_on: build-base
-    command: |
-      pnpm run test:types
-    plugins:
-      - docker#v4.0.0:
-          image: "${PACKAGE_IMAGE}-base"
-          skip-checkout: true
-          mount-checkout: false
-
-  - label: ":vitest: Run unit tests"
-    depends_on: build-base
-    key: "ut"
-    artifact_paths: "reports/junit/*.xml"
-    command: |
-      pnpm run test:vitest:run --reporter=default --reporter=junit --outputFile.junit=reports/junit/junit.xml
-    plugins:
-      - docker#v4.0.0:
-          image: "${PACKAGE_IMAGE}-base"
-          skip-checkout: true
-          mount-checkout: false
-          volumes:
-            - ./reports/junit:/app/packages/ui-vue/reports/junit
-
-  - label: ":memo: Tests Report"
-    depends_on: "ut"
-    allow_dependency_failure: true
-    plugins:
-      - junit-annotate#v2.0.2:
-          artifacts: "reports/junit/*.xml"
-          failure-format: file
-          report-slowest: 20

package/components-webpack.js

@@ -1,29 +0,0 @@
-import { RenderSlot } from './src/utils/slot'
-
-const NAME_REG = /Base([a-z0-9]+)\./i
-
-export function registerComponents (app, prefix = 'Ls') {
-  app.component('RenderSlot', RenderSlot)
-
-  const requireComponentsLib = require.context('./src/components/', true, /Base[a-z0-9]+\.(jsx?|vue)$/i)
-  requireComponentsLib.keys().forEach(fileName => {
-    const component = requireComponentsLib(fileName)
-    const name = fileName.match(NAME_REG)[1]
-    app.component(`${prefix}${name}`, component.default || component)
-  })
-}
-
-export function getComponents (prefix = 'Ls') {
-  const componentsMap = {}
-
-  componentsMap.RenderSlot = RenderSlot
-
-  const requireComponentsLib = require.context('./src/components/', true, /Base[a-z0-9]+\.(jsx?|vue)$/i)
-  requireComponentsLib.keys().forEach(fileName => {
-    const component = requireComponentsLib(fileName)
-    const name = fileName.match(NAME_REG)[1]
-    componentsMap[`${prefix}${name}`] = component.default || component
-  })
-
-  return componentsMap
-}