@leaflink/stash 50.12.2 → 50.14.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/assets/icons/user-group.svg +1 -0
- package/assets/spritesheet.svg +1 -1
- package/dist/Accordion.vue.d.ts +2 -2
- package/dist/AppNavigationItem.vue.d.ts +1 -1
- package/dist/CurrencyInput.js +34 -30
- package/dist/CurrencyInput.js.map +1 -1
- package/dist/CurrencyInput.vue.d.ts +4 -0
- package/dist/Filters.vue.d.ts +10 -2
- package/dist/Icon.js +11 -10
- package/dist/Icon.js.map +1 -1
- package/dist/Icon.vue.d.ts +1 -1
- package/dist/IconLabel.vue.d.ts +1 -1
- package/dist/InputOptions.js +61 -59
- package/dist/InputOptions.js.map +1 -1
- package/dist/InputOptions.vue.d.ts +22 -2
- package/dist/ListView.vue.d.ts +25 -23
- package/dist/QuickAction.vue.d.ts +1 -1
- package/dist/SelectStatus.vue.d.ts +1 -1
- package/dist/TextEditor.vue.d.ts +1 -1
- package/dist/components.css +1 -1
- package/package.json +1 -1
package/dist/Icon.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Icon.js","sources":["../src/components/Icon/Icon.types.ts","../src/components/Icon/Icon.vue"],"sourcesContent":["/**\n * To add a new icon, follow these steps:\n *\n * https://github.com/LeafLink/stash/blob/main/CONTRIBUTING.md#adding-a-new-icon\n */\nexport const iconNames = [\n 'action-dots',\n 'activity',\n 'alert-bell',\n 'archive',\n 'arrow-down',\n 'arrow-left',\n 'arrow-right',\n 'arrow-up',\n 'badge-discount',\n 'badge-seller-elite',\n 'badge-seller-power',\n 'badge-seller-verified',\n 'book-customer',\n 'building-office',\n 'bulk-add',\n 'calendar-reschedule',\n 'calendar',\n 'camera',\n 'caret-down',\n 'caret-up',\n 'change-log',\n 'check',\n 'chevron-down',\n 'chevron-left',\n 'chevron-right',\n 'chevron-up',\n 'circle-check',\n 'circle-close',\n 'circle-dollar',\n 'circle-empty',\n 'circle-info',\n 'circle-partial',\n 'circle-percent',\n 'circle-question-mark',\n 'circle-status',\n 'circle-warning',\n 'clipboard-checkmark',\n 'clipboard-inventory',\n 'close',\n 'combine',\n 'compass',\n 'contact',\n 'contract',\n 'copy',\n 'credit-card',\n 'credit-profile',\n 'dashboard',\n 'document-accept',\n 'document-invoice',\n 'document-recieved',\n 'document-sent',\n 'document-view',\n 'document',\n 'dolly',\n 'download',\n 'edit',\n 'ellipsis',\n 'envelope-open',\n 'envelope',\n 'equals',\n 'export',\n 'figma',\n 'file-csv',\n 'file',\n 'filter-funnel',\n 'filter-line',\n 'flag',\n 'folder',\n 'folder-bar-graph',\n 'folder-orders',\n 'font-bold',\n 'font-clear-format',\n 'font-italic',\n 'font-underline',\n 'gear',\n 'github',\n 'globe',\n 'graph-bar-chart',\n 'graph-line-chart',\n 'graph-pie-chart',\n 'hazard',\n 'hazard-outline',\n 'headset-agent',\n 'headset-mic',\n 'heart-filled',\n 'heart-outline',\n 'help-question-mark',\n 'hide',\n 'history',\n 'home',\n 'image',\n 'import',\n 'keyboard-return',\n 'tier-1',\n 'tier-2',\n 'tier-3',\n 'license-approved',\n 'license-certificate',\n 'lightbulb',\n 'link-add',\n 'link-unlink',\n 'link',\n 'list-bulleted',\n 'list-items',\n 'list-numbered',\n 'loading-big',\n 'loading-empty',\n 'loading-small',\n 'location',\n 'lock-unlock',\n 'lock',\n 'logo-facebook',\n 'logo-instagram',\n 'logo-linkedin',\n 'logo-ll',\n 'logo-metrc',\n 'logo-plaid',\n 'logo-x',\n 'logo-youtube',\n 'logout',\n 'medical',\n 'megaphone-sound',\n 'megaphone',\n 'menu',\n 'message-dispute',\n 'message-reply',\n 'message',\n 'minus',\n 'mj-leaf',\n 'money',\n 'note-add',\n 'note',\n 'open-in-new',\n 'paperclip',\n 'paper-plane',\n 'performance',\n 'phone',\n 'plus',\n 'preview',\n 'print',\n 'product-menu-manage',\n 'product-menu-search',\n 'product-menu',\n 'queue-add',\n 'queue',\n 'recent',\n 'refresh',\n 'register',\n 'reply',\n 'report-download',\n 'sample',\n 'save',\n 'scale-law',\n 'scale-weight',\n 'search',\n 'seed-cycle',\n 'share',\n 'shop-bag-browse',\n 'shop-bag-reorder',\n 'shop-bag',\n 'shop-basket',\n 'shop-cart-add',\n 'shop-cart',\n 'show',\n 'sign-dollar',\n 'sign-percent',\n 'sort',\n 'split',\n 'star-filled',\n 'star-outline',\n 'storefront',\n 'submit',\n 'swap-horizontal',\n 'swap-vertical',\n 'tag-star',\n 'tag',\n 'test-results',\n 'ticket-star',\n 'ticket',\n 'tool-dropper',\n 'tool-wrench',\n 'transfer',\n 'trashcan',\n 'truck',\n 'upload',\n 'user-add',\n 'user-admin',\n 'user-check',\n 'user',\n 'view-card',\n 'view-detailed',\n 'view-list',\n 'warehouse',\n 'working',\n] as const;\n\nexport type IconName = (typeof iconNames)[number];\n\nexport enum IconSizes {\n Standard = 'standard',\n Dense = 'dense',\n Small = 'small',\n Large = 'large',\n}\n\nexport type IconSize = `${IconSizes}`;\n","<script lang=\"ts\">\n export * from './Icon.types';\n</script>\n\n<script lang=\"ts\" setup>\n import uniqueId from 'lodash-es/uniqueId';\n import { computed, inject, useCssModule } from 'vue';\n import InlineSvg from 'vue-inline-svg';\n\n import { StashProvideState } from '../../../types/misc';\n import { IconName, iconNames, IconSize } from './Icon.types';\n\n export interface IconProps {\n id?: string;\n\n /**\n * The filename of the icon that should be displayed\n */\n name: IconName;\n\n /**\n * Accessible, short-text description for the icon. Not rendered as part of the graphic, but\n * browsers usually display it as a tooltip and screen readers use this.\n */\n title?: string;\n\n /**\n * The size of the icon\n * Options: large (32x32px), default (24x24px), dense (20x20px), small (14x14px).\n */\n size?: IconSize;\n\n /**\n * @deprecated Use the `size` prop with value \"dense\" instead\n */\n dense?: boolean;\n\n /**\n` * @deprecated Use the `size` prop with value \"small\" instead\n */\n small?: boolean;\n\n /**\n * Icon's custom static path. It'll default to either the staticPath defined on the library installation or '/static' if none are provided.\n */\n staticPath?: string;\n }\n\n defineOptions({\n name: 'll-icon',\n });\n\n const props = withDefaults(defineProps<IconProps>(), {\n id: () => uniqueId('ll-icon-'),\n size: 'standard',\n title: '',\n staticPath: '',\n });\n const classes = useCssModule();\n const stashOptions = inject<Partial<StashProvideState>>('stashOptions', {\n staticPath: '/static',\n });\n\n const computedName = computed<IconName>(() => {\n if (iconNames.includes(props.name)) {\n return props.name;\n }\n\n return 'mj-leaf';\n });\n\n const computedStaticPath = computed(() => {\n return props.staticPath || stashOptions?.staticPath;\n });\n\n /**\n * Event handler to add the use tag for the specific icon we need to the svg\n */\n const transformSvgSource = (svgElem: SVGElement) => {\n if (!svgElem) {\n return svgElem;\n }\n\n const useNode = document.createElement('use');\n useNode.setAttribute('href', `#${computedName.value}`);\n\n // Grab icon from sprite\n const symbolNode = svgElem.querySelector(`#${computedName.value}`);\n\n // This really shouldn't happen but if the spritesheet gets out of sync with the `IconName` type it could\n if (!symbolNode) {\n // still insert <use> element but it will not be found (this is more for tests than anything else)\n svgElem.insertBefore(useNode, svgElem.firstChild);\n return svgElem;\n }\n\n /**\n * Repeatedly inlining the entire spritesheet was causing failures in mobile Safari, and also\n * performance issues on long list pages where the svg was being inlined over and over.\n * Since the SVG is cached after the first request, this callback is just removing the unnecessary\n * <symbol> nodes to slim down the DOM manipulation and insertion.\n */\n // Replace all children with just the one <symbol> element and <use> element\n svgElem.replaceChildren(symbolNode, useNode);\n\n return svgElem;\n };\n</script>\n\n<!-- Use inline svg so that requests to pull the spritesheet are done via JS and avoid\n browser restrictions for different domains for svgs. inline svg also caches the requests\n so we don't load the spritesheet multiple times\n Reference: https://oreillymedia.github.io/Using_SVG/extras/ch10-cors.html -->\n<template>\n <InlineSvg\n :id=\"props.id\"\n role=\"presentation\"\n :aria-labelledby=\"props.id\"\n class=\"stash-icon\"\n :class=\"[\n classes.icon,\n `icon--${props.name}`,\n {\n [classes.standard]: props.size === 'standard',\n [classes.dense]: props.size === 'dense' || props.dense,\n [classes.small]: props.size === 'small' || props.small,\n [classes.large]: props.size === 'large',\n },\n ]\"\n data-test=\"stash-icon\"\n :src=\"`${computedStaticPath}/spritesheet.svg`\"\n :title=\"props.title\"\n :transform-source=\"transformSvgSource\"\n />\n</template>\n\n<style module>\n .icon {\n display: inline-block;\n fill: currentcolor;\n vertical-align: middle;\n }\n\n .standard {\n height: 24px;\n min-height: 24px;\n min-width: 24px;\n width: 24px;\n }\n\n .dense {\n height: 20px;\n min-height: 20px;\n min-width: 20px;\n width: 20px;\n }\n\n .small {\n height: 14px;\n min-height: 14px;\n min-width: 14px;\n width: 14px;\n }\n\n .large {\n height: 32px;\n min-height: 32px;\n min-width: 32px;\n width: 32px;\n }\n</style>\n"],"names":["iconNames","IconSizes","props","__props","classes","useCssModule","stashOptions","inject","computedName","computed","computedStaticPath","transformSvgSource","svgElem","useNode","symbolNode"],"mappings":";;;;AAKO,MAAMA,IAAY;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAIY,IAAAC,sBAAAA,OACVA,EAAA,WAAW,YACXA,EAAA,QAAQ,SACRA,EAAA,QAAQ,SACRA,EAAA,QAAQ,SAJEA,IAAAA,KAAA,CAAA,CAAA;;;;;;;;;;;;;;ACxJV,UAAMC,IAAQC,GAMRC,IAAUC,EAAa,GACvBC,IAAeC,EAAmC,gBAAgB;AAAA,MACtE,YAAY;AAAA,IAAA,CACb,GAEKC,IAAeC,EAAmB,MAClCT,EAAU,SAASE,EAAM,IAAI,IACxBA,EAAM,OAGR,SACR,GAEKQ,IAAqBD,EAAS,MAC3BP,EAAM,eAAcI,KAAA,gBAAAA,EAAc,WAC1C,GAKKK,IAAqB,CAACC,MAAwB;AAClD,UAAI,CAACA;AACI,eAAAA;AAGH,YAAAC,IAAU,SAAS,cAAc,KAAK;AAC5C,MAAAA,EAAQ,aAAa,QAAQ,IAAIL,EAAa,KAAK,EAAE;AAGrD,YAAMM,IAAaF,EAAQ,cAAc,IAAIJ,EAAa,KAAK,EAAE;AAGjE,aAAKM,KAaGF,EAAA,gBAAgBE,GAAYD,CAAO,GAEpCD,MAbGA,EAAA,aAAaC,GAASD,EAAQ,UAAU,GACzCA;AAAA,IAaX;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
1
|
+
{"version":3,"file":"Icon.js","sources":["../src/components/Icon/Icon.types.ts","../src/components/Icon/Icon.vue"],"sourcesContent":["/**\n * To add a new icon, follow these steps:\n *\n * https://github.com/LeafLink/stash/blob/main/CONTRIBUTING.md#adding-a-new-icon\n */\nexport const iconNames = [\n 'action-dots',\n 'activity',\n 'alert-bell',\n 'archive',\n 'arrow-down',\n 'arrow-left',\n 'arrow-right',\n 'arrow-up',\n 'badge-discount',\n 'badge-seller-elite',\n 'badge-seller-power',\n 'badge-seller-verified',\n 'book-customer',\n 'building-office',\n 'bulk-add',\n 'calendar-reschedule',\n 'calendar',\n 'camera',\n 'caret-down',\n 'caret-up',\n 'change-log',\n 'check',\n 'chevron-down',\n 'chevron-left',\n 'chevron-right',\n 'chevron-up',\n 'circle-check',\n 'circle-close',\n 'circle-dollar',\n 'circle-empty',\n 'circle-info',\n 'circle-partial',\n 'circle-percent',\n 'circle-question-mark',\n 'circle-status',\n 'circle-warning',\n 'clipboard-checkmark',\n 'clipboard-inventory',\n 'close',\n 'combine',\n 'compass',\n 'contact',\n 'contract',\n 'copy',\n 'credit-card',\n 'credit-profile',\n 'dashboard',\n 'document-accept',\n 'document-invoice',\n 'document-recieved',\n 'document-sent',\n 'document-view',\n 'document',\n 'dolly',\n 'download',\n 'edit',\n 'ellipsis',\n 'envelope-open',\n 'envelope',\n 'equals',\n 'export',\n 'figma',\n 'file-csv',\n 'file',\n 'filter-funnel',\n 'filter-line',\n 'flag',\n 'folder',\n 'folder-bar-graph',\n 'folder-orders',\n 'font-bold',\n 'font-clear-format',\n 'font-italic',\n 'font-underline',\n 'gear',\n 'github',\n 'globe',\n 'graph-bar-chart',\n 'graph-line-chart',\n 'graph-pie-chart',\n 'hazard',\n 'hazard-outline',\n 'headset-agent',\n 'headset-mic',\n 'heart-filled',\n 'heart-outline',\n 'help-question-mark',\n 'hide',\n 'history',\n 'home',\n 'image',\n 'import',\n 'keyboard-return',\n 'tier-1',\n 'tier-2',\n 'tier-3',\n 'license-approved',\n 'license-certificate',\n 'lightbulb',\n 'link-add',\n 'link-unlink',\n 'link',\n 'list-bulleted',\n 'list-items',\n 'list-numbered',\n 'loading-big',\n 'loading-empty',\n 'loading-small',\n 'location',\n 'lock-unlock',\n 'lock',\n 'logo-facebook',\n 'logo-instagram',\n 'logo-linkedin',\n 'logo-ll',\n 'logo-metrc',\n 'logo-plaid',\n 'logo-x',\n 'logo-youtube',\n 'logout',\n 'medical',\n 'megaphone-sound',\n 'megaphone',\n 'menu',\n 'message-dispute',\n 'message-reply',\n 'message',\n 'minus',\n 'mj-leaf',\n 'money',\n 'note-add',\n 'note',\n 'open-in-new',\n 'paperclip',\n 'paper-plane',\n 'performance',\n 'phone',\n 'plus',\n 'preview',\n 'print',\n 'product-menu-manage',\n 'product-menu-search',\n 'product-menu',\n 'queue-add',\n 'queue',\n 'recent',\n 'refresh',\n 'register',\n 'reply',\n 'report-download',\n 'sample',\n 'save',\n 'scale-law',\n 'scale-weight',\n 'search',\n 'seed-cycle',\n 'share',\n 'shop-bag-browse',\n 'shop-bag-reorder',\n 'shop-bag',\n 'shop-basket',\n 'shop-cart-add',\n 'shop-cart',\n 'show',\n 'sign-dollar',\n 'sign-percent',\n 'sort',\n 'split',\n 'star-filled',\n 'star-outline',\n 'storefront',\n 'submit',\n 'swap-horizontal',\n 'swap-vertical',\n 'tag-star',\n 'tag',\n 'test-results',\n 'ticket-star',\n 'ticket',\n 'tool-dropper',\n 'tool-wrench',\n 'transfer',\n 'trashcan',\n 'truck',\n 'upload',\n 'user-add',\n 'user-admin',\n 'user-check',\n 'user-group',\n 'user',\n 'view-card',\n 'view-detailed',\n 'view-list',\n 'warehouse',\n 'working',\n] as const;\n\nexport type IconName = (typeof iconNames)[number];\n\nexport enum IconSizes {\n Standard = 'standard',\n Dense = 'dense',\n Small = 'small',\n Large = 'large',\n}\n\nexport type IconSize = `${IconSizes}`;\n","<script lang=\"ts\">\n export * from './Icon.types';\n</script>\n\n<script lang=\"ts\" setup>\n import uniqueId from 'lodash-es/uniqueId';\n import { computed, inject, useCssModule } from 'vue';\n import InlineSvg from 'vue-inline-svg';\n\n import { StashProvideState } from '../../../types/misc';\n import { IconName, iconNames, IconSize } from './Icon.types';\n\n export interface IconProps {\n id?: string;\n\n /**\n * The filename of the icon that should be displayed\n */\n name: IconName;\n\n /**\n * Accessible, short-text description for the icon. Not rendered as part of the graphic, but\n * browsers usually display it as a tooltip and screen readers use this.\n */\n title?: string;\n\n /**\n * The size of the icon\n * Options: large (32x32px), default (24x24px), dense (20x20px), small (14x14px).\n */\n size?: IconSize;\n\n /**\n * @deprecated Use the `size` prop with value \"dense\" instead\n */\n dense?: boolean;\n\n /**\n` * @deprecated Use the `size` prop with value \"small\" instead\n */\n small?: boolean;\n\n /**\n * Icon's custom static path. It'll default to either the staticPath defined on the library installation or '/static' if none are provided.\n */\n staticPath?: string;\n }\n\n defineOptions({\n name: 'll-icon',\n });\n\n const props = withDefaults(defineProps<IconProps>(), {\n id: () => uniqueId('ll-icon-'),\n size: 'standard',\n title: '',\n staticPath: '',\n });\n const classes = useCssModule();\n const stashOptions = inject<Partial<StashProvideState>>('stashOptions', {\n staticPath: '/static',\n });\n\n const computedName = computed<IconName>(() => {\n if (iconNames.includes(props.name)) {\n return props.name;\n }\n\n return 'mj-leaf';\n });\n\n const computedStaticPath = computed(() => {\n return props.staticPath || stashOptions?.staticPath;\n });\n\n /**\n * Event handler to add the use tag for the specific icon we need to the svg\n */\n const transformSvgSource = (svgElem: SVGElement) => {\n if (!svgElem) {\n return svgElem;\n }\n\n const useNode = document.createElement('use');\n useNode.setAttribute('href', `#${computedName.value}`);\n\n // Grab icon from sprite\n const symbolNode = svgElem.querySelector(`#${computedName.value}`);\n\n // This really shouldn't happen but if the spritesheet gets out of sync with the `IconName` type it could\n if (!symbolNode) {\n // still insert <use> element but it will not be found (this is more for tests than anything else)\n svgElem.insertBefore(useNode, svgElem.firstChild);\n return svgElem;\n }\n\n /**\n * Repeatedly inlining the entire spritesheet was causing failures in mobile Safari, and also\n * performance issues on long list pages where the svg was being inlined over and over.\n * Since the SVG is cached after the first request, this callback is just removing the unnecessary\n * <symbol> nodes to slim down the DOM manipulation and insertion.\n */\n // Replace all children with just the one <symbol> element and <use> element\n svgElem.replaceChildren(symbolNode, useNode);\n\n return svgElem;\n };\n</script>\n\n<!-- Use inline svg so that requests to pull the spritesheet are done via JS and avoid\n browser restrictions for different domains for svgs. inline svg also caches the requests\n so we don't load the spritesheet multiple times\n Reference: https://oreillymedia.github.io/Using_SVG/extras/ch10-cors.html -->\n<template>\n <InlineSvg\n :id=\"props.id\"\n role=\"presentation\"\n :aria-labelledby=\"props.id\"\n class=\"stash-icon\"\n :class=\"[\n classes.icon,\n `icon--${props.name}`,\n {\n [classes.standard]: props.size === 'standard',\n [classes.dense]: props.size === 'dense' || props.dense,\n [classes.small]: props.size === 'small' || props.small,\n [classes.large]: props.size === 'large',\n },\n ]\"\n data-test=\"stash-icon\"\n :src=\"`${computedStaticPath}/spritesheet.svg`\"\n :title=\"props.title\"\n :transform-source=\"transformSvgSource\"\n />\n</template>\n\n<style module>\n .icon {\n display: inline-block;\n fill: currentcolor;\n vertical-align: middle;\n }\n\n .standard {\n height: 24px;\n min-height: 24px;\n min-width: 24px;\n width: 24px;\n }\n\n .dense {\n height: 20px;\n min-height: 20px;\n min-width: 20px;\n width: 20px;\n }\n\n .small {\n height: 14px;\n min-height: 14px;\n min-width: 14px;\n width: 14px;\n }\n\n .large {\n height: 32px;\n min-height: 32px;\n min-width: 32px;\n width: 32px;\n }\n</style>\n"],"names":["iconNames","IconSizes","props","__props","classes","useCssModule","stashOptions","inject","computedName","computed","computedStaticPath","transformSvgSource","svgElem","useNode","symbolNode"],"mappings":";;;;AAKO,MAAMA,IAAY;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAIY,IAAAC,sBAAAA,OACVA,EAAA,WAAW,YACXA,EAAA,QAAQ,SACRA,EAAA,QAAQ,SACRA,EAAA,QAAQ,SAJEA,IAAAA,KAAA,CAAA,CAAA;;;;;;;;;;;;;;ACzJV,UAAMC,IAAQC,GAMRC,IAAUC,EAAa,GACvBC,IAAeC,EAAmC,gBAAgB;AAAA,MACtE,YAAY;AAAA,IAAA,CACb,GAEKC,IAAeC,EAAmB,MAClCT,EAAU,SAASE,EAAM,IAAI,IACxBA,EAAM,OAGR,SACR,GAEKQ,IAAqBD,EAAS,MAC3BP,EAAM,eAAcI,KAAA,gBAAAA,EAAc,WAC1C,GAKKK,IAAqB,CAACC,MAAwB;AAClD,UAAI,CAACA;AACI,eAAAA;AAGH,YAAAC,IAAU,SAAS,cAAc,KAAK;AAC5C,MAAAA,EAAQ,aAAa,QAAQ,IAAIL,EAAa,KAAK,EAAE;AAGrD,YAAMM,IAAaF,EAAQ,cAAc,IAAIJ,EAAa,KAAK,EAAE;AAGjE,aAAKM,KAaGF,EAAA,gBAAgBE,GAAYD,CAAO,GAEpCD,MAbGA,EAAA,aAAaC,GAASD,EAAQ,UAAU,GACzCA;AAAA,IAaX;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/dist/Icon.vue.d.ts
CHANGED
|
@@ -51,7 +51,7 @@ export declare type IconName = (typeof iconNames)[number];
|
|
|
51
51
|
*
|
|
52
52
|
* https://github.com/LeafLink/stash/blob/main/CONTRIBUTING.md#adding-a-new-icon
|
|
53
53
|
*/
|
|
54
|
-
export declare const iconNames: readonly ["action-dots", "activity", "alert-bell", "archive", "arrow-down", "arrow-left", "arrow-right", "arrow-up", "badge-discount", "badge-seller-elite", "badge-seller-power", "badge-seller-verified", "book-customer", "building-office", "bulk-add", "calendar-reschedule", "calendar", "camera", "caret-down", "caret-up", "change-log", "check", "chevron-down", "chevron-left", "chevron-right", "chevron-up", "circle-check", "circle-close", "circle-dollar", "circle-empty", "circle-info", "circle-partial", "circle-percent", "circle-question-mark", "circle-status", "circle-warning", "clipboard-checkmark", "clipboard-inventory", "close", "combine", "compass", "contact", "contract", "copy", "credit-card", "credit-profile", "dashboard", "document-accept", "document-invoice", "document-recieved", "document-sent", "document-view", "document", "dolly", "download", "edit", "ellipsis", "envelope-open", "envelope", "equals", "export", "figma", "file-csv", "file", "filter-funnel", "filter-line", "flag", "folder", "folder-bar-graph", "folder-orders", "font-bold", "font-clear-format", "font-italic", "font-underline", "gear", "github", "globe", "graph-bar-chart", "graph-line-chart", "graph-pie-chart", "hazard", "hazard-outline", "headset-agent", "headset-mic", "heart-filled", "heart-outline", "help-question-mark", "hide", "history", "home", "image", "import", "keyboard-return", "tier-1", "tier-2", "tier-3", "license-approved", "license-certificate", "lightbulb", "link-add", "link-unlink", "link", "list-bulleted", "list-items", "list-numbered", "loading-big", "loading-empty", "loading-small", "location", "lock-unlock", "lock", "logo-facebook", "logo-instagram", "logo-linkedin", "logo-ll", "logo-metrc", "logo-plaid", "logo-x", "logo-youtube", "logout", "medical", "megaphone-sound", "megaphone", "menu", "message-dispute", "message-reply", "message", "minus", "mj-leaf", "money", "note-add", "note", "open-in-new", "paperclip", "paper-plane", "performance", "phone", "plus", "preview", "print", "product-menu-manage", "product-menu-search", "product-menu", "queue-add", "queue", "recent", "refresh", "register", "reply", "report-download", "sample", "save", "scale-law", "scale-weight", "search", "seed-cycle", "share", "shop-bag-browse", "shop-bag-reorder", "shop-bag", "shop-basket", "shop-cart-add", "shop-cart", "show", "sign-dollar", "sign-percent", "sort", "split", "star-filled", "star-outline", "storefront", "submit", "swap-horizontal", "swap-vertical", "tag-star", "tag", "test-results", "ticket-star", "ticket", "tool-dropper", "tool-wrench", "transfer", "trashcan", "truck", "upload", "user-add", "user-admin", "user-check", "user", "view-card", "view-detailed", "view-list", "warehouse", "working"];
|
|
54
|
+
export declare const iconNames: readonly ["action-dots", "activity", "alert-bell", "archive", "arrow-down", "arrow-left", "arrow-right", "arrow-up", "badge-discount", "badge-seller-elite", "badge-seller-power", "badge-seller-verified", "book-customer", "building-office", "bulk-add", "calendar-reschedule", "calendar", "camera", "caret-down", "caret-up", "change-log", "check", "chevron-down", "chevron-left", "chevron-right", "chevron-up", "circle-check", "circle-close", "circle-dollar", "circle-empty", "circle-info", "circle-partial", "circle-percent", "circle-question-mark", "circle-status", "circle-warning", "clipboard-checkmark", "clipboard-inventory", "close", "combine", "compass", "contact", "contract", "copy", "credit-card", "credit-profile", "dashboard", "document-accept", "document-invoice", "document-recieved", "document-sent", "document-view", "document", "dolly", "download", "edit", "ellipsis", "envelope-open", "envelope", "equals", "export", "figma", "file-csv", "file", "filter-funnel", "filter-line", "flag", "folder", "folder-bar-graph", "folder-orders", "font-bold", "font-clear-format", "font-italic", "font-underline", "gear", "github", "globe", "graph-bar-chart", "graph-line-chart", "graph-pie-chart", "hazard", "hazard-outline", "headset-agent", "headset-mic", "heart-filled", "heart-outline", "help-question-mark", "hide", "history", "home", "image", "import", "keyboard-return", "tier-1", "tier-2", "tier-3", "license-approved", "license-certificate", "lightbulb", "link-add", "link-unlink", "link", "list-bulleted", "list-items", "list-numbered", "loading-big", "loading-empty", "loading-small", "location", "lock-unlock", "lock", "logo-facebook", "logo-instagram", "logo-linkedin", "logo-ll", "logo-metrc", "logo-plaid", "logo-x", "logo-youtube", "logout", "medical", "megaphone-sound", "megaphone", "menu", "message-dispute", "message-reply", "message", "minus", "mj-leaf", "money", "note-add", "note", "open-in-new", "paperclip", "paper-plane", "performance", "phone", "plus", "preview", "print", "product-menu-manage", "product-menu-search", "product-menu", "queue-add", "queue", "recent", "refresh", "register", "reply", "report-download", "sample", "save", "scale-law", "scale-weight", "search", "seed-cycle", "share", "shop-bag-browse", "shop-bag-reorder", "shop-bag", "shop-basket", "shop-cart-add", "shop-cart", "show", "sign-dollar", "sign-percent", "sort", "split", "star-filled", "star-outline", "storefront", "submit", "swap-horizontal", "swap-vertical", "tag-star", "tag", "test-results", "ticket-star", "ticket", "tool-dropper", "tool-wrench", "transfer", "trashcan", "truck", "upload", "user-add", "user-admin", "user-check", "user-group", "user", "view-card", "view-detailed", "view-list", "warehouse", "working"];
|
|
55
55
|
|
|
56
56
|
export declare interface IconProps {
|
|
57
57
|
id?: string;
|
package/dist/IconLabel.vue.d.ts
CHANGED
|
@@ -89,7 +89,7 @@ declare type IconName = (typeof iconNames)[number];
|
|
|
89
89
|
*
|
|
90
90
|
* https://github.com/LeafLink/stash/blob/main/CONTRIBUTING.md#adding-a-new-icon
|
|
91
91
|
*/
|
|
92
|
-
declare const iconNames: readonly ["action-dots", "activity", "alert-bell", "archive", "arrow-down", "arrow-left", "arrow-right", "arrow-up", "badge-discount", "badge-seller-elite", "badge-seller-power", "badge-seller-verified", "book-customer", "building-office", "bulk-add", "calendar-reschedule", "calendar", "camera", "caret-down", "caret-up", "change-log", "check", "chevron-down", "chevron-left", "chevron-right", "chevron-up", "circle-check", "circle-close", "circle-dollar", "circle-empty", "circle-info", "circle-partial", "circle-percent", "circle-question-mark", "circle-status", "circle-warning", "clipboard-checkmark", "clipboard-inventory", "close", "combine", "compass", "contact", "contract", "copy", "credit-card", "credit-profile", "dashboard", "document-accept", "document-invoice", "document-recieved", "document-sent", "document-view", "document", "dolly", "download", "edit", "ellipsis", "envelope-open", "envelope", "equals", "export", "figma", "file-csv", "file", "filter-funnel", "filter-line", "flag", "folder", "folder-bar-graph", "folder-orders", "font-bold", "font-clear-format", "font-italic", "font-underline", "gear", "github", "globe", "graph-bar-chart", "graph-line-chart", "graph-pie-chart", "hazard", "hazard-outline", "headset-agent", "headset-mic", "heart-filled", "heart-outline", "help-question-mark", "hide", "history", "home", "image", "import", "keyboard-return", "tier-1", "tier-2", "tier-3", "license-approved", "license-certificate", "lightbulb", "link-add", "link-unlink", "link", "list-bulleted", "list-items", "list-numbered", "loading-big", "loading-empty", "loading-small", "location", "lock-unlock", "lock", "logo-facebook", "logo-instagram", "logo-linkedin", "logo-ll", "logo-metrc", "logo-plaid", "logo-x", "logo-youtube", "logout", "medical", "megaphone-sound", "megaphone", "menu", "message-dispute", "message-reply", "message", "minus", "mj-leaf", "money", "note-add", "note", "open-in-new", "paperclip", "paper-plane", "performance", "phone", "plus", "preview", "print", "product-menu-manage", "product-menu-search", "product-menu", "queue-add", "queue", "recent", "refresh", "register", "reply", "report-download", "sample", "save", "scale-law", "scale-weight", "search", "seed-cycle", "share", "shop-bag-browse", "shop-bag-reorder", "shop-bag", "shop-basket", "shop-cart-add", "shop-cart", "show", "sign-dollar", "sign-percent", "sort", "split", "star-filled", "star-outline", "storefront", "submit", "swap-horizontal", "swap-vertical", "tag-star", "tag", "test-results", "ticket-star", "ticket", "tool-dropper", "tool-wrench", "transfer", "trashcan", "truck", "upload", "user-add", "user-admin", "user-check", "user", "view-card", "view-detailed", "view-list", "warehouse", "working"];
|
|
92
|
+
declare const iconNames: readonly ["action-dots", "activity", "alert-bell", "archive", "arrow-down", "arrow-left", "arrow-right", "arrow-up", "badge-discount", "badge-seller-elite", "badge-seller-power", "badge-seller-verified", "book-customer", "building-office", "bulk-add", "calendar-reschedule", "calendar", "camera", "caret-down", "caret-up", "change-log", "check", "chevron-down", "chevron-left", "chevron-right", "chevron-up", "circle-check", "circle-close", "circle-dollar", "circle-empty", "circle-info", "circle-partial", "circle-percent", "circle-question-mark", "circle-status", "circle-warning", "clipboard-checkmark", "clipboard-inventory", "close", "combine", "compass", "contact", "contract", "copy", "credit-card", "credit-profile", "dashboard", "document-accept", "document-invoice", "document-recieved", "document-sent", "document-view", "document", "dolly", "download", "edit", "ellipsis", "envelope-open", "envelope", "equals", "export", "figma", "file-csv", "file", "filter-funnel", "filter-line", "flag", "folder", "folder-bar-graph", "folder-orders", "font-bold", "font-clear-format", "font-italic", "font-underline", "gear", "github", "globe", "graph-bar-chart", "graph-line-chart", "graph-pie-chart", "hazard", "hazard-outline", "headset-agent", "headset-mic", "heart-filled", "heart-outline", "help-question-mark", "hide", "history", "home", "image", "import", "keyboard-return", "tier-1", "tier-2", "tier-3", "license-approved", "license-certificate", "lightbulb", "link-add", "link-unlink", "link", "list-bulleted", "list-items", "list-numbered", "loading-big", "loading-empty", "loading-small", "location", "lock-unlock", "lock", "logo-facebook", "logo-instagram", "logo-linkedin", "logo-ll", "logo-metrc", "logo-plaid", "logo-x", "logo-youtube", "logout", "medical", "megaphone-sound", "megaphone", "menu", "message-dispute", "message-reply", "message", "minus", "mj-leaf", "money", "note-add", "note", "open-in-new", "paperclip", "paper-plane", "performance", "phone", "plus", "preview", "print", "product-menu-manage", "product-menu-search", "product-menu", "queue-add", "queue", "recent", "refresh", "register", "reply", "report-download", "sample", "save", "scale-law", "scale-weight", "search", "seed-cycle", "share", "shop-bag-browse", "shop-bag-reorder", "shop-bag", "shop-basket", "shop-cart-add", "shop-cart", "show", "sign-dollar", "sign-percent", "sort", "split", "star-filled", "star-outline", "storefront", "submit", "swap-horizontal", "swap-vertical", "tag-star", "tag", "test-results", "ticket-star", "ticket", "tool-dropper", "tool-wrench", "transfer", "trashcan", "truck", "upload", "user-add", "user-admin", "user-check", "user-group", "user", "view-card", "view-detailed", "view-list", "warehouse", "working"];
|
|
93
93
|
|
|
94
94
|
declare type StashCommonColor = `${StashCommonColors}`;
|
|
95
95
|
|
package/dist/InputOptions.js
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import { defineComponent as
|
|
1
|
+
import { defineComponent as O, useSlots as $, useAttrs as E, useCssModule as T, ref as u, watchEffect as D, watch as v, createBlock as j, openBlock as p, mergeProps as M, createSlots as R, withCtx as h, createElementBlock as y, createElementVNode as F, toDisplayString as f, normalizeClass as _, unref as d, renderSlot as b, createVNode as w } from "vue";
|
|
2
2
|
import N from "./Input.js";
|
|
3
3
|
import U from "./Select.js";
|
|
4
4
|
import { _ as q } from "./Field.vue_vue_type_script_setup_true_lang-DRaKs9Lm.js";
|
|
5
|
-
import { _ as
|
|
6
|
-
const
|
|
5
|
+
import { _ as z } from "./_plugin-vue_export-helper-CHgC5LLL.js";
|
|
6
|
+
const A = {
|
|
7
7
|
key: 0,
|
|
8
8
|
class: "tw-flex tw-h-input tw-items-center tw-text-sm"
|
|
9
|
-
},
|
|
9
|
+
}, L = ["id", "aria-labelledby"], P = /* @__PURE__ */ O({
|
|
10
10
|
name: "ll-input-options",
|
|
11
11
|
__name: "InputOptions",
|
|
12
12
|
props: {
|
|
@@ -31,11 +31,11 @@ const L = {
|
|
|
31
31
|
disabled: { type: Boolean }
|
|
32
32
|
},
|
|
33
33
|
emits: ["update:model-value", "change"],
|
|
34
|
-
setup(
|
|
35
|
-
const e =
|
|
36
|
-
function
|
|
37
|
-
|
|
38
|
-
value:
|
|
34
|
+
setup(B, { emit: g }) {
|
|
35
|
+
const e = B, o = g, V = $(), r = E(), n = T(), a = u(), c = u(!1), t = u();
|
|
36
|
+
function C(l) {
|
|
37
|
+
a.value = String(l), o("update:model-value", {
|
|
38
|
+
value: a.value,
|
|
39
39
|
option: t.value,
|
|
40
40
|
isValueChange: !0,
|
|
41
41
|
type: "input"
|
|
@@ -43,109 +43,111 @@ const L = {
|
|
|
43
43
|
}
|
|
44
44
|
function k() {
|
|
45
45
|
o("change", {
|
|
46
|
-
value:
|
|
46
|
+
value: a.value,
|
|
47
47
|
option: t.value,
|
|
48
48
|
isValueChange: !0,
|
|
49
49
|
type: "input"
|
|
50
50
|
});
|
|
51
51
|
}
|
|
52
|
-
function
|
|
53
|
-
t.value =
|
|
54
|
-
value:
|
|
52
|
+
function I(l) {
|
|
53
|
+
t.value = l, o("change", {
|
|
54
|
+
value: a.value,
|
|
55
55
|
option: t.value,
|
|
56
56
|
isValueChange: !1,
|
|
57
57
|
type: "select"
|
|
58
58
|
}), o("update:model-value", {
|
|
59
|
-
value:
|
|
59
|
+
value: a.value,
|
|
60
60
|
option: t.value,
|
|
61
61
|
isValueChange: !1,
|
|
62
62
|
type: "select"
|
|
63
63
|
});
|
|
64
64
|
}
|
|
65
|
-
if (
|
|
65
|
+
if (D(() => {
|
|
66
66
|
t.value || (t.value = e.options[0]);
|
|
67
|
-
}),
|
|
67
|
+
}), v(
|
|
68
68
|
() => e.modelValue.value,
|
|
69
69
|
() => {
|
|
70
|
-
|
|
70
|
+
a.value = e.modelValue.value;
|
|
71
71
|
},
|
|
72
72
|
{ immediate: !0 }
|
|
73
|
-
),
|
|
73
|
+
), v(
|
|
74
74
|
() => e.modelValue.option,
|
|
75
75
|
() => {
|
|
76
76
|
t.value = e.modelValue.option;
|
|
77
77
|
},
|
|
78
78
|
{ immediate: !0 }
|
|
79
|
-
),
|
|
79
|
+
), r.value)
|
|
80
80
|
throw new Error("ll-input-options: use :model-value or v-model instead of :value.");
|
|
81
|
-
if (
|
|
81
|
+
if (r.onInput)
|
|
82
82
|
throw new Error("ll-input-options: use the @update:model-value event instead of @input");
|
|
83
|
-
return (
|
|
83
|
+
return (l, s) => (p(), j(q, M(e, {
|
|
84
84
|
class: "stash-input-options",
|
|
85
85
|
"data-test": "stash-input-options"
|
|
86
86
|
}), R({
|
|
87
|
-
default:
|
|
88
|
-
var
|
|
87
|
+
default: h(({ fieldId: i, labelId: S }) => {
|
|
88
|
+
var m;
|
|
89
89
|
return [
|
|
90
|
-
e.isReadOnly ? (
|
|
91
|
-
|
|
92
|
-
id:
|
|
93
|
-
"aria-labelledby":
|
|
90
|
+
e.isReadOnly ? (p(), y("div", A, [
|
|
91
|
+
F("span", {
|
|
92
|
+
id: i,
|
|
93
|
+
"aria-labelledby": S,
|
|
94
94
|
class: "tw-h-min"
|
|
95
|
-
},
|
|
96
|
-
])) : (
|
|
95
|
+
}, f(a.value || 0) + " " + f((m = t.value) == null ? void 0 : m.name), 9, L)
|
|
96
|
+
])) : (p(), y("div", {
|
|
97
97
|
key: 1,
|
|
98
|
-
class:
|
|
98
|
+
class: _(["tw-flex", [d(n)["input-wrapper"], { [d(n)["has-error"]]: !!e.errorText }]])
|
|
99
99
|
}, [
|
|
100
|
-
b(
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
100
|
+
b(l.$slots, "default", { fieldId: i }, () => [
|
|
101
|
+
w(N, {
|
|
102
|
+
id: i,
|
|
103
|
+
class: "stash-input-options__input",
|
|
104
|
+
"data-test": "stash-input-options|input",
|
|
105
|
+
type: e.type,
|
|
106
|
+
"model-value": a.value,
|
|
107
|
+
disabled: e.isDisabled || e.disabled,
|
|
108
|
+
placeholder: e.placeholder,
|
|
109
|
+
onChange: k,
|
|
110
|
+
"onUpdate:modelValue": C,
|
|
111
|
+
onBlur: s[0] || (s[0] = (x) => c.value = !1),
|
|
112
|
+
onFocus: s[1] || (s[1] = (x) => c.value = !0)
|
|
113
|
+
}, null, 8, ["id", "type", "model-value", "disabled", "placeholder"])
|
|
114
|
+
]),
|
|
115
|
+
w(U, {
|
|
114
116
|
single: "",
|
|
115
117
|
"hide-search": "",
|
|
116
118
|
"prevent-empty": "",
|
|
117
|
-
class:
|
|
119
|
+
class: _(["stash-input-options__select tw-min-w-20", d(n).select]),
|
|
118
120
|
"data-test": "stash-input-options|select",
|
|
119
|
-
"no-truncate":
|
|
120
|
-
options:
|
|
121
|
+
"no-truncate": l.noTruncate,
|
|
122
|
+
options: l.options,
|
|
121
123
|
"model-value": t.value,
|
|
122
124
|
"display-by": e.displayBy,
|
|
123
125
|
"track-by": e.trackBy,
|
|
124
126
|
disabled: e.isDisabled || e.disabled,
|
|
125
|
-
"onUpdate:modelValue":
|
|
127
|
+
"onUpdate:modelValue": I
|
|
126
128
|
}, null, 8, ["class", "no-truncate", "options", "model-value", "display-by", "track-by", "disabled"])
|
|
127
129
|
], 2))
|
|
128
130
|
];
|
|
129
131
|
}),
|
|
130
132
|
_: 2
|
|
131
133
|
}, [
|
|
132
|
-
|
|
134
|
+
V.hint ? {
|
|
133
135
|
name: "hint",
|
|
134
|
-
fn:
|
|
135
|
-
|
|
136
|
+
fn: h(() => [
|
|
137
|
+
b(l.$slots, "hint")
|
|
136
138
|
]),
|
|
137
139
|
key: "0"
|
|
138
140
|
} : void 0
|
|
139
141
|
]), 1040));
|
|
140
142
|
}
|
|
141
|
-
}), G = "
|
|
142
|
-
input:
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
},
|
|
146
|
-
$style:
|
|
147
|
-
},
|
|
143
|
+
}), G = "_select_1jmut_26", H = {
|
|
144
|
+
"input-wrapper": "_input-wrapper_1jmut_2",
|
|
145
|
+
"has-error": "_has-error_1jmut_14",
|
|
146
|
+
select: G
|
|
147
|
+
}, J = {
|
|
148
|
+
$style: H
|
|
149
|
+
}, Z = /* @__PURE__ */ z(P, [["__cssModules", J]]);
|
|
148
150
|
export {
|
|
149
|
-
|
|
151
|
+
Z as default
|
|
150
152
|
};
|
|
151
153
|
//# sourceMappingURL=InputOptions.js.map
|
package/dist/InputOptions.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputOptions.js","sources":["../src/components/InputOptions/InputOptions.vue"],"sourcesContent":["<script lang=\"ts\">\n import { FieldProps } from '../Field/Field.types';\n import Field from '../Field/Field.vue';\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n type Option = any;\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n type SelectedOption = any;\n\n export interface InputOptionsProps extends FieldProps {\n /**\n * The current value inclusive of the input & select\n */\n modelValue?: { value: string; option?: SelectedOption };\n\n /**\n * Input type\n */\n type?: string extends 'button' | 'checkbox' | 'radio' | 'submit' ? never : string;\n\n /**\n * Prevents the Selected Option from being truncated, if true\n */\n noTruncate?: boolean;\n\n /**\n * Options for the select\n */\n options?: Option[];\n\n /**\n * Placeholder text for the input\n * **Note:** placeholders should be used to display examples; they should not be used as labels because they are not accessible as labels. If a real label cannot be used, use the `aria-label` attribute.\n */\n placeholder?: string;\n\n /**\n * If `options` are an object, this is what prop to use for display.\n */\n displayBy?: string;\n\n /**\n * Default field to track selected options by.\n */\n trackBy?: string;\n }\n</script>\n\n<script lang=\"ts\" setup>\n import { ref, useAttrs, useCssModule,
|
|
1
|
+
{"version":3,"file":"InputOptions.js","sources":["../src/components/InputOptions/InputOptions.vue"],"sourcesContent":["<script lang=\"ts\">\n import { FieldProps } from '../Field/Field.types';\n import Field from '../Field/Field.vue';\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n type Option = any;\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n type SelectedOption = any;\n\n export interface InputOptionsProps extends FieldProps {\n /**\n * The current value inclusive of the input & select\n */\n modelValue?: { value: string; option?: SelectedOption };\n\n /**\n * Input type\n */\n type?: string extends 'button' | 'checkbox' | 'radio' | 'submit' ? never : string;\n\n /**\n * Prevents the Selected Option from being truncated, if true\n */\n noTruncate?: boolean;\n\n /**\n * Options for the select\n */\n options?: Option[];\n\n /**\n * Placeholder text for the input\n * **Note:** placeholders should be used to display examples; they should not be used as labels because they are not accessible as labels. If a real label cannot be used, use the `aria-label` attribute.\n */\n placeholder?: string;\n\n /**\n * If `options` are an object, this is what prop to use for display.\n */\n displayBy?: string;\n\n /**\n * Default field to track selected options by.\n */\n trackBy?: string;\n }\n</script>\n\n<script lang=\"ts\" setup>\n import { ref, useAttrs, useCssModule, watch, watchEffect } from 'vue';\n\n import Input from '../Input/Input.vue';\n import Select from '../Select/Select.vue';\n\n defineOptions({\n name: 'll-input-options',\n });\n\n const props = withDefaults(defineProps<InputOptionsProps>(), {\n modelValue: () => ({ value: '', option: undefined }),\n noTruncate: false,\n options: () => [],\n type: 'text',\n placeholder: undefined,\n displayBy: undefined,\n trackBy: undefined,\n });\n\n const emit = defineEmits<{\n /**\n * Emitted when the model value changes\n */\n (\n e: 'update:model-value',\n v: { value?: string; option?: SelectedOption; isValueChange: boolean; type: 'input' | 'select' },\n ): void;\n /**\n * Emitted when either the input or select changes\n */\n (\n e: 'change',\n v: { value?: string; option?: SelectedOption; isValueChange: boolean; type: 'input' | 'select' },\n ): void;\n }>();\n\n const slots = defineSlots<{\n /**\n * Default slot for rendering a custom input field.\n */\n default: (props: { fieldId: string }) => void;\n /**\n * Hint slot for rendering a custom hint text.\n */\n hint: () => void;\n }>();\n\n const attrs = useAttrs();\n const classes = useCssModule();\n const internalInput = ref<string>();\n const isInputFocused = ref(false);\n const selectedOption = ref<Option | undefined>();\n\n // Input value changed\n function handleInput(val?: string | number) {\n internalInput.value = String(val);\n\n emit('update:model-value', {\n value: internalInput.value,\n option: selectedOption.value,\n isValueChange: true,\n type: 'input',\n });\n }\n\n // Input blurred\n function handleInputChange() {\n emit('change', {\n value: internalInput.value,\n option: selectedOption.value,\n isValueChange: true,\n type: 'input',\n });\n }\n\n function handleSelectChange(val?: Option) {\n selectedOption.value = val;\n\n emit('change', {\n value: internalInput.value,\n option: selectedOption.value,\n isValueChange: false,\n type: 'select',\n });\n emit('update:model-value', {\n value: internalInput.value,\n option: selectedOption.value,\n isValueChange: false,\n type: 'select',\n });\n }\n\n watchEffect(() => {\n if (!selectedOption.value) {\n selectedOption.value = props.options[0];\n }\n });\n\n watch(\n () => props.modelValue.value,\n () => {\n internalInput.value = props.modelValue.value;\n },\n { immediate: true },\n );\n\n watch(\n () => props.modelValue.option,\n () => {\n selectedOption.value = props.modelValue.option;\n },\n { immediate: true },\n );\n\n if (attrs.value) {\n throw new Error('ll-input-options: use :model-value or v-model instead of :value.');\n }\n\n if (attrs.onInput) {\n throw new Error('ll-input-options: use the @update:model-value event instead of @input');\n }\n</script>\n\n<template>\n <Field v-bind=\"props\" class=\"stash-input-options\" data-test=\"stash-input-options\">\n <template #default=\"{ fieldId, labelId }\">\n <div v-if=\"props.isReadOnly\" class=\"tw-flex tw-h-input tw-items-center tw-text-sm\">\n <span :id=\"fieldId\" :aria-labelledby=\"labelId\" class=\"tw-h-min\">\n {{ internalInput || 0 }} {{ selectedOption?.name }}\n </span>\n </div>\n <div v-else class=\"tw-flex\" :class=\"[classes['input-wrapper'], { [classes['has-error']]: !!props.errorText }]\">\n <slot :field-id=\"fieldId\">\n <Input\n :id=\"fieldId\"\n class=\"stash-input-options__input\"\n data-test=\"stash-input-options|input\"\n :type=\"props.type\"\n :model-value=\"internalInput\"\n :disabled=\"props.isDisabled || props.disabled\"\n :placeholder=\"props.placeholder\"\n @change=\"handleInputChange\"\n @update:model-value=\"handleInput\"\n @blur=\"isInputFocused = false\"\n @focus=\"isInputFocused = true\"\n />\n </slot>\n\n <Select\n single\n hide-search\n prevent-empty\n class=\"stash-input-options__select tw-min-w-20\"\n data-test=\"stash-input-options|select\"\n :class=\"classes.select\"\n :no-truncate=\"noTruncate\"\n :options=\"options\"\n :model-value=\"selectedOption\"\n :display-by=\"props.displayBy\"\n :track-by=\"props.trackBy\"\n :disabled=\"props.isDisabled || props.disabled\"\n @update:model-value=\"handleSelectChange\"\n />\n </div>\n </template>\n <template v-if=\"slots.hint\" #hint>\n <!-- @slot Hint slot for rendering text below the input -->\n <slot name=\"hint\"></slot>\n </template>\n </Field>\n</template>\n\n<style module>\n .input-wrapper {\n & > div:has(input) {\n display: inline-block;\n flex: 1;\n margin-right: -1px;\n }\n\n & input {\n border-bottom-right-radius: 0;\n border-top-right-radius: 0;\n }\n\n &.has-error input,\n &.has-error input:hover:not(:focus),\n &.has-error :global(.stash-select__content),\n &.has-error :global(.stash-select__content:hover:not(:focus)) {\n border-color: var(--color-red-500);\n }\n\n & div:has(input:focus) {\n z-index: 200 !important;\n }\n }\n\n .select :global(.stash-select__content) {\n border-bottom-left-radius: 0;\n border-top-left-radius: 0;\n }\n\n .select:global(.stash-select--active .stash-select__content) {\n min-width: 0;\n }\n</style>\n"],"names":["props","__props","emit","__emit","slots","_useSlots","attrs","useAttrs","classes","useCssModule","internalInput","ref","isInputFocused","selectedOption","handleInput","val","handleInputChange","handleSelectChange","watchEffect","watch"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2DE,UAAMA,IAAQC,GAURC,IAAOC,GAiBPC,IAAQC,EASV,GAEEC,IAAQC,EAAS,GACjBC,IAAUC,EAAa,GACvBC,IAAgBC,EAAY,GAC5BC,IAAiBD,EAAI,EAAK,GAC1BE,IAAiBF,EAAwB;AAG/C,aAASG,EAAYC,GAAuB;AAC5B,MAAAL,EAAA,QAAQ,OAAOK,CAAG,GAEhCb,EAAK,sBAAsB;AAAA,QACzB,OAAOQ,EAAc;AAAA,QACrB,QAAQG,EAAe;AAAA,QACvB,eAAe;AAAA,QACf,MAAM;AAAA,MAAA,CACP;AAAA,IAAA;AAIH,aAASG,IAAoB;AAC3B,MAAAd,EAAK,UAAU;AAAA,QACb,OAAOQ,EAAc;AAAA,QACrB,QAAQG,EAAe;AAAA,QACvB,eAAe;AAAA,QACf,MAAM;AAAA,MAAA,CACP;AAAA,IAAA;AAGH,aAASI,EAAmBF,GAAc;AACxC,MAAAF,EAAe,QAAQE,GAEvBb,EAAK,UAAU;AAAA,QACb,OAAOQ,EAAc;AAAA,QACrB,QAAQG,EAAe;AAAA,QACvB,eAAe;AAAA,QACf,MAAM;AAAA,MAAA,CACP,GACDX,EAAK,sBAAsB;AAAA,QACzB,OAAOQ,EAAc;AAAA,QACrB,QAAQG,EAAe;AAAA,QACvB,eAAe;AAAA,QACf,MAAM;AAAA,MAAA,CACP;AAAA,IAAA;AAyBH,QAtBAK,EAAY,MAAM;AACZ,MAACL,EAAe,UACHA,EAAA,QAAQb,EAAM,QAAQ,CAAC;AAAA,IACxC,CACD,GAEDmB;AAAA,MACE,MAAMnB,EAAM,WAAW;AAAA,MACvB,MAAM;AACU,QAAAU,EAAA,QAAQV,EAAM,WAAW;AAAA,MACzC;AAAA,MACA,EAAE,WAAW,GAAK;AAAA,IACpB,GAEAmB;AAAA,MACE,MAAMnB,EAAM,WAAW;AAAA,MACvB,MAAM;AACW,QAAAa,EAAA,QAAQb,EAAM,WAAW;AAAA,MAC1C;AAAA,MACA,EAAE,WAAW,GAAK;AAAA,IACpB,GAEIM,EAAM;AACF,YAAA,IAAI,MAAM,kEAAkE;AAGpF,QAAIA,EAAM;AACF,YAAA,IAAI,MAAM,uEAAuE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -91,8 +91,28 @@ value: string;
|
|
|
91
91
|
option?: any;
|
|
92
92
|
};
|
|
93
93
|
noTruncate: boolean;
|
|
94
|
-
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, {
|
|
95
|
-
|
|
94
|
+
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, Readonly<{
|
|
95
|
+
/**
|
|
96
|
+
* Default slot for rendering a custom input field.
|
|
97
|
+
*/
|
|
98
|
+
default: (props: {
|
|
99
|
+
fieldId: string;
|
|
100
|
+
}) => void;
|
|
101
|
+
/**
|
|
102
|
+
* Hint slot for rendering a custom hint text.
|
|
103
|
+
*/
|
|
104
|
+
hint: () => void;
|
|
105
|
+
}> & {
|
|
106
|
+
/**
|
|
107
|
+
* Default slot for rendering a custom input field.
|
|
108
|
+
*/
|
|
109
|
+
default: (props: {
|
|
110
|
+
fieldId: string;
|
|
111
|
+
}) => void;
|
|
112
|
+
/**
|
|
113
|
+
* Hint slot for rendering a custom hint text.
|
|
114
|
+
*/
|
|
115
|
+
hint: () => void;
|
|
96
116
|
}>;
|
|
97
117
|
export default _default;
|
|
98
118
|
|