@dataloop-ai/components 0.20.149 → 0.20.151

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataloop-ai/components",
-  "version": "0.20.149",
+  "version": "0.20.151",
   "exports": {
     ".": "./index.ts",
     "./models": "./models.ts",
@@ -23,7 +23,7 @@
     "check-only": "if grep -E -H -r --exclude-dir=.git --exclude-dir=node_modules --exclude=*.json --exclude=*.yml '^(describe|it).only' .; then echo 'Found only in test files' && exit 1; fi"
   },
   "dependencies": {
-    "@dataloop-ai/icons": "^3.1.27",
+    "@dataloop-ai/icons": "^3.1.29",
     "@types/flat": "^5.0.2",
     "@types/lodash": "^4.14.184",
     "@types/sortablejs": "^1.15.7",

package/src/components/compound/DlDropdownButton/DlDropdownButton.vue

@@ -114,14 +114,19 @@
         @click="onClick"
     >
         <div class="dl-button-dropdown--simple__title">
-            <span
-                :class="{
-                    'dl-button-no-wrap': noWrap
-                }"
-                style="margin-right: 6px"
-            >
-                {{ label }}
-            </span>
+            <template v-if="hasLabelSlot">
+                <slot name="label" />
+            </template>
+            <template v-else>
+                <span
+                    :class="{
+                        'dl-button-no-wrap': noWrap
+                    }"
+                    style="margin-right: 6px"
+                >
+                    {{ label }}
+                </span>
+            </template>
             <dl-icon
                 :class="iconClass"
                 :icon="dropdownIcon"
@@ -278,7 +283,7 @@ export default defineComponent({
         ...arrowNavigationEvents
     ],
 
-    setup(props, { emit }) {
+    setup(props, { emit, slots }) {
         const vm = getCurrentInstance()
         const proxy = vm!.proxy!
         const { textColor } = toRefs(props)
@@ -286,6 +291,9 @@ export default defineComponent({
         const showing = ref<boolean>(!!props.modelValue) as Ref<boolean>
         const menuRef = ref(null)
 
+        const hasLabelSlot = computed(() => {
+            return !!slots.label
+        })
         const attributes = computed(() => {
             const acc: Record<string, string> = {
                 'aria-expanded': showing.value === true ? 'true' : 'false',
@@ -489,7 +497,8 @@ export default defineComponent({
             cssVars,
             getIconColor,
             computedTextColor,
-            separatorColor
+            separatorColor,
+            hasLabelSlot
         }
     }
 })

package/src/demos/DlDropdownButtonDemo.vue

@@ -312,6 +312,33 @@
                     </dl-list>
                 </dl-dropdown-button>
             </div>
+
+            <div class="grid grid-cols-3" style="column-gap: 10px">
+                <dl-dropdown-button
+                    auto-close
+                    :model-value="showing"
+                    main-button-style="width: 150px;"
+                    @show="onOpen"
+                >
+                    <template #label>
+                        <div class="flex row" style="gap: 5px">
+                            <span>{{ slotLabel }}</span>
+                            <dl-icon icon="icon-dl-info" size="s" />
+                        </div>
+                    </template>
+                    <dl-list>
+                        <dl-list-item clickable>
+                            <dl-item-section> Photos </dl-item-section>
+                        </dl-list-item>
+                        <dl-list-item clickable>
+                            <dl-item-section> Videos </dl-item-section>
+                        </dl-list-item>
+                        <dl-list-item clickable>
+                            <dl-item-section> Articles </dl-item-section>
+                        </dl-list-item>
+                    </dl-list>
+                </dl-dropdown-button>
+            </div>
         </div>
 
         <div style="margin-top: 20px; display: flex; flex-direction: column">
@@ -346,7 +373,8 @@ import {
     DlItemSection,
     DlList,
     DlDropdownButton,
-    DlEllipsis
+    DlEllipsis,
+    DlIcon
 } from '../components'
 
 export default defineComponent({
@@ -356,7 +384,8 @@ export default defineComponent({
         DlItemSection,
         DlList,
         DlDropdownButton,
-        DlEllipsis
+        DlEllipsis,
+        DlIcon
     },
     setup() {
         const highlightedIndex = ref(-1)
@@ -365,6 +394,7 @@ export default defineComponent({
         const arrowNavigationLabel = ref('Arrow Navigation Label')
         const outlinedLabel = ref('Outlined Label')
         const containedLabel = ref('Contained Label')
+        const slotLabel = ref('Slot Label')
 
         const listItems = ref([
             'New tab',
@@ -415,7 +445,8 @@ export default defineComponent({
             highlightedIndex,
             arrowNavigationLabel,
             outlinedLabel,
-            containedLabel
+            containedLabel,
+            slotLabel
         }
     }
 })

package/src/utils/splitByQuotes.ts

@@ -1,4 +1,4 @@
-import Tokenizr from "tokenizr"
+import Tokenizr from 'tokenizr/src/tokenizr.js'
 
 export enum TokenType {
     NUMBER = 'number',
@@ -18,35 +18,44 @@ enum Tags {
     HAD_VALUE = 'had-value'
 }
 
-let tokenizer = new Tokenizr()
+const tokenizer = new Tokenizr()
 
 tokenizer.rule(/[+-]?[0-9\.]+/, (ctx, match) => {
     ctx.accept(TokenType.NUMBER, parseFloat(match[0])).tag(Tags.HAD_VALUE)
 })
 
-tokenizer.rule(/\((\d{2}\/\d{2}\/\d{4}[\)']?\s?|\s?DD\/MM\/YYYY)\s?(\d{2}:\d{2}:\d{2}|\s?HH:mm:ss)?\)/, (ctx, match) => {
-    ctx.accept(TokenType.DATETIME, parseFloat(match[0])).tag(Tags.HAD_VALUE)
-})
-
+tokenizer.rule(
+    /\((\d{2}\/\d{2}\/\d{4}[\)']?\s?|\s?DD\/MM\/YYYY)\s?(\d{2}:\d{2}:\d{2}|\s?HH:mm:ss)?\)/,
+    (ctx, match) => {
+        ctx.accept(TokenType.DATETIME, parseFloat(match[0])).tag(Tags.HAD_VALUE)
+    }
+)
 ;[
-    /<=?/, />=?/, /!=?/, /=/,
+    /<=?/,
+    />=?/,
+    /!=?/,
+    /=/,
     /in?(?![^\s'"])/i,
     /n(o(t(-(in?)?)?)?)?(?![^\s'"])/i,
     /e(x(i(s(ts?)?)?)?)?(?!\S)/i,
     /d(o(e(s(n(t(-(e(x(i(st?)?)?)?)?)?)?)?)?)?)?(?!\S)/i
-].forEach(re => tokenizer.rule(re, (ctx, match) => {
-    if (!ctx.tagged(Tags.HAD_FIELD) && /^[a-z]/i.test(match[0])) {
-        ctx.accept(TokenType.FIELD).tag(Tags.HAD_FIELD)
-    } else {
-        ctx.accept(TokenType.OPERATOR, match[0].toUpperCase())
-    }
-}))
+].forEach((re) =>
+    tokenizer.rule(re, (ctx, match) => {
+        if (!ctx.tagged(Tags.HAD_FIELD) && /^[a-z]/i.test(match[0])) {
+            ctx.accept(TokenType.FIELD).tag(Tags.HAD_FIELD)
+        } else {
+            ctx.accept(TokenType.OPERATOR, match[0].toUpperCase())
+        }
+    })
+)
 
 tokenizer.rule(/[a-z][a-z\.\d\-_]*/i, (ctx, match) => {
     const upper = match[0].toUpperCase()
     if (ctx.tagged(Tags.HAD_VALUE)) {
         // we just had a value - it would be followed by AND or OR
-        ctx.untag(Tags.HAD_FIELD).untag(Tags.HAD_VALUE).accept(TokenType.LOGICAL, upper)
+        ctx.untag(Tags.HAD_FIELD)
+            .untag(Tags.HAD_VALUE)
+            .accept(TokenType.LOGICAL, upper)
     } else if (ctx.tagged(Tags.HAD_FIELD)) {
         // we had a field but no value yet - this must be either a boolean or an unquoted string
         if (['TRUE', 'FALSE'].includes(upper)) {
@@ -65,16 +74,22 @@ tokenizer.rule(/,/, (ctx) => {
 })
 
 tokenizer.rule(/(?<!\\)"(.*?)(?<!\\)"/, (ctx, match) => {
-    ctx.accept(TokenType.STRING, match[1].replace(/\\"/g, '"')).tag(Tags.HAD_VALUE)
+    ctx.accept(TokenType.STRING, match[1].replace(/\\"/g, '"')).tag(
+        Tags.HAD_VALUE
+    )
 })
 
 tokenizer.rule(/(?<!\\)'(.*?)(?<!\\)'/, (ctx, match) => {
-    ctx.accept(TokenType.STRING, match[1].replace(/\\'/g, "'")).tag(Tags.HAD_VALUE)
+    ctx.accept(TokenType.STRING, match[1].replace(/\\'/g, "'")).tag(
+        Tags.HAD_VALUE
+    )
 })
 
 tokenizer.rule(/(?<!\\)['"](.*)/, (ctx, match) => {
     // partial string
-    ctx.accept(TokenType.PARTIAL_VALUE, match[1].replace(/\\'/g, "'")).tag(Tags.HAD_VALUE)
+    ctx.accept(TokenType.PARTIAL_VALUE, match[1].replace(/\\'/g, "'")).tag(
+        Tags.HAD_VALUE
+    )
 })
 
 tokenizer.rule(/\s+/, (ctx) => {
@@ -94,16 +109,16 @@ export function tokenize(input: string) {
 
 export function splitByQuotes(input: string, ignore?: string) {
     const parts = tokenize(input)
-        .filter(token => token.type !== 'whitespace')
-        .map(token => token.text)
+        .filter((token) => token.type !== 'whitespace')
+        .map((token) => token.text)
         .map((text, index, array) => {
-            if(array[index + 1] === ',') {
+            if (array[index + 1] === ',') {
                 return text + ','
             } else {
                 return text === ',' ? '' : text
             }
         })
-        .filter(text => text !== '')
+        .filter((text) => text !== '')
 
     if (/\s$/.test(input)) {
         parts.push('')