@dialpad/dialtone-vue 3.223.1 → 3.224.0-next.2

package/dist/Scroller-PdWd9P1m.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Scroller-PdWd9P1m.js","names":["$emit"],"sources":["../components/Scroller/Modules/CoreScroller.vue","../components/Scroller/Modules/ScrollerItem.vue","../components/Scroller/Modules/DynamicScroller.vue","../components/Scroller/Scroller.vue"],"sourcesContent":["<!-- eslint-disable max-len -->\n<template>\n  <div\n    ref=\"scroller\"\n    class=\"vue-recycle-scroller\"\n    :class=\"{\n      ready,\n      [`direction-${direction}`]: true,\n    }\"\n    @scroll.passive=\"handleScroll\"\n  >\n    <component\n      :is=\"listTag\"\n      ref=\"wrapper\"\n      :style=\"{ [direction === 'vertical' ? 'minHeight' : 'minWidth']: `${totalSize}px` }\"\n      class=\"vue-recycle-scroller__item-wrapper\"\n      :class=\"listClass\"\n    >\n      <component\n        :is=\"itemTag\"\n        v-for=\"view in pool\"\n        :key=\"view.nr.id\"\n        :style=\"ready ? {\n          transform: `translate${direction === 'vertical' ? 'Y' : 'X'}(${view.position}px) translate${direction === 'vertical' ? 'X' : 'Y'}(${view.offset}px)`,\n          width: undefined,\n          height: undefined,\n        } : null\"\n        class=\"vue-recycle-scroller__item-view\"\n        :class=\"[\n          itemClass,\n          {\n            hover: props.enableHover && hoverKey === view.nr.key,\n          },\n        ]\"\n        v-on=\"props.enableHover ? {\n          mouseenter: () => { hoverKey = view.nr.key },\n          mouseleave: () => { hoverKey = null },\n        } : {}\"\n      >\n        <slot\n          :item=\"view.item\"\n          :index=\"view.nr.index\"\n          :active=\"view.nr.used\"\n        />\n      </component>\n    </component>\n  </div>\n</template>\n\n<script setup>\n/*\nThis is a code from external library (https://github.com/Akryum/vue-virtual-scroller/blob/master/packages/vue-virtual-scroller/src/components/RecycleScroller.vue)\nWe have modified it for our own specific use.\n*/\nimport { computed, watch, markRaw, shallowReactive, onMounted, nextTick, reactive, ref } from 'vue';\n\nconst props = defineProps({\n  /**\n     * List of items you want to display in the scroller.\n     */\n  items: {\n    type: Array,\n    required: true,\n  },\n\n  /**\n     *\n     * Field used to identify items and optimize managing rendered views\n     */\n  keyField: {\n    type: String,\n    default: 'id',\n  },\n\n  /**\n     * Direction of the scroller. Can be either `vertical` or `horizontal`.\n     */\n  direction: {\n    type: String,\n    default: 'vertical',\n    validator: (value) => ['vertical', 'horizontal'].includes(value),\n  },\n\n  /**\n     * Size of the items in the list.\n     * If it is set to null (the default value), it will use variable size mode.\n     */\n  itemSize: {\n    type: Number,\n    default: null,\n  },\n\n  /**\n     * Minimum size used if the height (or width in horizontal mode) of an item is unknown.\n     */\n  minItemSize: {\n    type: [Number, String],\n    default: null,\n  },\n\n  /**\n     * Field used to get the item's size in variable size mode.\n     */\n  sizeField: {\n    type: String,\n    default: 'size',\n  },\n\n  /**\n     * Amount of pixel to add to edges of the scrolling visible area to start rendering items further away.\n     */\n  buffer: {\n    type: Number,\n    default: 200,\n  },\n\n  /**\n     * Enables hover state CSS class and mouse events on items.\n     * Set to false if you want to manage hover state yourself.\n     */\n  enableHover: {\n    type: Boolean,\n    default: true,\n  },\n\n  /**\n     * The element to render as the list's wrapper.\n     */\n  listTag: {\n    type: String,\n    default: 'div',\n  },\n\n  /**\n     * The element to render as the list item.\n     */\n  itemTag: {\n    type: String,\n    default: 'div',\n  },\n\n  /**\n     * The custom classes added to the item list wrapper.\n     */\n  listClass: {\n    type: [String, Object, Array],\n    default: '',\n  },\n\n  /**\n     * The custom classes added to each item.\n     */\n  itemClass: {\n    type: [String, Object, Array],\n    default: '',\n  },\n});\n\nconst emit = defineEmits(['user-position']);\n\nconst views = reactive(new Map());\n// const reactiveItems = reactive(props.items);\nconst unusedViews = reactive(new Map());\nconst updateTimeout = null;\nconst pool = ref([]);\nconst hoverKey = ref(null);\nconst ready = ref(false);\nconst scroller = ref(null);\nconst userPosition = ref('top');\n\nlet startIndex = 0;\nlet endIndex = 0;\nlet scrollDirty = false;\nlet lastUpdateScrollPosition = 0;\nlet sortTimer = null;\nlet computedMinItemSize = null;\nlet totalSize = 0;\nlet uid = 0;\n\nconst sizes = computed(() => {\n  if (props.itemSize === null) {\n    const sizes = {\n      '-1': { accumulator: 0 },\n    };\n    const items = props.items;\n    const field = props.sizeField;\n    const minItemSize = props.minItemSize;\n    let computedMinSize = 10000;\n    let accumulator = 0;\n    let current;\n    for (let i = 0, l = items.length; i < l; i++) {\n      current = items[i][field] || minItemSize;\n      if (current < computedMinSize) {\n        computedMinSize = current;\n      }\n      accumulator += current;\n      sizes[i] = { accumulator, size: current };\n    }\n\n    computedMinItemSize = computedMinSize;\n    return sizes;\n  }\n  return [];\n});\n\nconst simpleArray = computed(() => {\n  return props.items.length && typeof props.items[0] !== 'object';\n});\n\nconst itemIndexByKey = computed(() => {\n  const result = {};\n  for (let i = 0, l = props.items.length; i < l; i++) {\n    result[props.items[i][props.keyField]] = i;\n  }\n  return result;\n});\n\n// watch(reactiveItems, () => {\n//   // if add to the top\n//   // _updateVisibleItems(true);\n//   // if autoscrolling  if add to the bottom\n//   // _updateVisibleItems(false, true);\n// });\n\nwatch(sizes, () => {\n  _updateVisibleItems(false);\n}, { deep: true });\n\nonMounted(() => {\n  nextTick(() => {\n    // In SSR mode, render the real number of visible items\n    _updateVisibleItems(true);\n    ready.value = true;\n  });\n});\n\nconst _addView = (pool, index, item, key, type) => {\n  const nr = markRaw({\n    id: uid++,\n    index,\n    used: true,\n    key,\n    type,\n  });\n  const view = shallowReactive({\n    item,\n    position: 0,\n    nr,\n  });\n  pool.value.push(view);\n  return view;\n};\n\nconst _unuseView = (view, fake = false) => {\n  const _unusedViews = unusedViews;\n  const type = view.nr.type;\n  let unusedPool = _unusedViews.get(type);\n  if (!unusedPool) {\n    unusedPool = [];\n    _unusedViews.set(type, unusedPool);\n  }\n  unusedPool.push(view);\n  if (!fake) {\n    view.nr.used = false;\n    view.position = -9999;\n  }\n};\n\nconst _getScroll = () => {\n  const isVertical = props.direction === 'vertical';\n  let scrollState;\n\n  if (isVertical) {\n    scrollState = {\n      start: scroller.value.scrollTop,\n      end: scroller.value.scrollTop + scroller.value.clientHeight,\n    };\n  } else {\n    scrollState = {\n      start: scroller.value.scrollLeft,\n      end: scroller.value.scrollLeft + scroller.value.clientWidth,\n    };\n  }\n\n  return scrollState;\n};\n\nconst _itemsLimitError = () => {\n  setTimeout(() => {\n     \n    console.error('It seems the scroller element isn\\'t scrolling, so it tries to render all the items at once.', 'Scroller:', scroller);\n     \n    console.error('Make sure the scroller has a fixed height (or width) and \\'overflow-y\\' (or \\'overflow-x\\') set to \\'auto\\' so it can scroll correctly and only render the items visible in the scroll viewport.');\n  });\n  throw new Error('Rendered items limit reached');\n};\n\nconst _sortViews = () => {\n  pool.value.sort((viewA, viewB) => viewA.nr.index - viewB.nr.index);\n};\n\nconst _updateVisibleItems = (checkItem, checkPositionDiff = false) => {\n  const itemSize = props.itemSize;\n  const minItemSize = computedMinItemSize;\n  const keyField = simpleArray.value ? null : props.keyField;\n  const items = props.items;\n  const count = items.length;\n  const _sizes = sizes.value;\n  const _views = views;\n  const _unusedViews = unusedViews;\n  const _pool = pool;\n  const _itemIndexByKey = itemIndexByKey;\n  let _startIndex, _endIndex;\n  let _totalSize;\n  let visibleStartIndex, visibleEndIndex;\n\n  if (!count) {\n    _startIndex = _endIndex = visibleStartIndex = visibleEndIndex = _totalSize = 0;\n  } else {\n    const scroll = _getScroll();\n\n    // Skip update if use hasn't scrolled enough\n    if (checkPositionDiff) {\n      let positionDiff = scroll.start - lastUpdateScrollPosition.value;\n      if (positionDiff < 0) positionDiff = -positionDiff;\n      if ((itemSize === null && positionDiff < minItemSize.value) || positionDiff < itemSize) {\n        return {\n          continuous: true,\n        };\n      }\n    }\n    lastUpdateScrollPosition = scroll.start;\n\n    const _buffer = props.buffer;\n    scroll.start -= _buffer;\n    scroll.end += _buffer;\n\n    // Variable size mode\n    if (itemSize === null) {\n      let h;\n      let a = 0;\n      let b = count - 1;\n      let i = ~~(count / 2);\n      let oldI;\n\n      // Searching for _startIndex\n      do {\n        oldI = i;\n        h = _sizes[i]?.accumulator;\n        if (h < scroll.start) {\n          a = i;\n        } else if (i < count - 1 && _sizes[i + 1]?.accumulator > scroll.start) {\n          b = i;\n        }\n        i = ~~((a + b) / 2);\n      } while (i !== oldI);\n      i < 0 && (i = 0);\n      _startIndex = i;\n\n      // For container style\n      _totalSize = _sizes[count - 1]?.accumulator;\n\n      // Searching for _endIndex\n      for (\n        _endIndex = i;\n        _endIndex < count && _sizes[_endIndex]?.accumulator < scroll.end;\n        _endIndex++\n      );\n\n      if (_endIndex === -1) {\n        _endIndex = items.length - 1;\n      } else {\n        _endIndex++;\n        // Bounds\n        _endIndex > count && (_endIndex = count);\n      }\n\n      // search visible _startIndex\n      for (\n        visibleStartIndex = startIndex;\n        visibleStartIndex < count && (_sizes[visibleStartIndex]?.accumulator) < scroll.start;\n        visibleStartIndex++\n      );\n\n      // search visible endIndex\n      for (\n        visibleEndIndex = visibleStartIndex;\n        visibleEndIndex < count && (_sizes[visibleEndIndex]?.accumulator) < scroll.end;\n        visibleEndIndex++\n      );\n    } else {\n      // Fixed size mode\n      _startIndex = ~~(scroll.start / itemSize);\n      const remainer = _startIndex % 1;\n      _startIndex -= remainer;\n      _endIndex = Math.ceil(scroll.end / itemSize);\n      visibleStartIndex = Math.max(0, Math.floor((scroll.start) / itemSize));\n      visibleEndIndex = Math.floor((scroll.end) / itemSize);\n\n      // Bounds\n      _startIndex < 0 && (_startIndex = 0);\n      _endIndex > count && (_endIndex = count);\n      visibleStartIndex < 0 && (visibleStartIndex = 0);\n      visibleEndIndex > count && (visibleEndIndex = count);\n\n      _totalSize = Math.ceil(count / 1) * itemSize;\n    }\n  }\n\n  // items limit 1000\n  if (_endIndex - _startIndex > 1000) {\n    _itemsLimitError();\n  }\n\n  totalSize = _totalSize;\n\n  let view;\n\n  const continuous = _startIndex <= endIndex && _endIndex >= _startIndex;\n\n  // Unuse views that are no longer visible\n  if (continuous) {\n    for (let i = 0, l = _pool.value.length; i < l; i++) {\n      view = _pool.value[i];\n      if (view?.nr.used) {\n        // Update view item index\n        if (checkItem) {\n          view.nr.index = _itemIndexByKey[view.item[keyField]];\n        }\n\n        // Check if index is still in visible range\n        if (\n          view.nr.index == null ||\n          view.nr.index < _startIndex ||\n          view.nr.index >= _endIndex\n        ) {\n          _unuseView(view);\n        }\n      }\n    }\n  }\n\n  const unusedIndex = continuous ? null : new Map();\n\n  let item, type;\n  let v;\n  for (let i = _startIndex; i < _endIndex; i++) {\n    item = items[i];\n    const key = keyField ? item?.[keyField] : item;\n\n    if (key == null) {\n      throw new Error(`Key is ${key} on item (keyField is '${keyField}')`);\n    }\n    view = _views.get(key);\n\n    if (!itemSize && !_sizes[i]?.size) {\n      if (view) _unuseView(view);\n      continue;\n    }\n\n    type = item.type;\n\n    let unusedPool = _unusedViews.get(type);\n    // let newlyUsedView = false;\n\n    // No view assigned to item\n    if (!view) {\n      if (continuous) {\n        // Reuse existing view\n        if (unusedPool && unusedPool.length) {\n          view = unusedPool.pop();\n        } else {\n          view = _addView(_pool, i, item, key, type);\n        }\n      } else {\n        // Use existing view\n        // We don't care if they are already used\n        // because we are not in continous scrolling\n        v = unusedIndex.get(type) || 0;\n\n        if (!unusedPool || v >= unusedPool.length) {\n          view = _addView(_pool, i, item, key, type);\n          _unuseView(view, true);\n          unusedPool = _unusedViews.get(type);\n        }\n\n        view = unusedPool[v];\n        unusedIndex.set(type, v + 1);\n      }\n\n      // Assign view to item\n      _views.delete(view.nr.key);\n      view.nr.used = true;\n      view.nr.index = i;\n      view.nr.key = key;\n      view.nr.type = type;\n      _views.set(key, view);\n\n      // newlyUsedView = true;\n    } else {\n      // View already assigned to item\n      if (!view.nr.used) {\n        view.nr.used = true;\n        // newlyUsedView = true;\n        if (unusedPool) {\n          const index = unusedPool.indexOf(view);\n          if (index !== -1) unusedPool.splice(index, 1);\n        }\n      }\n    }\n\n    // Always set item in case it's a new object with the same key\n    view.item = item;\n\n    // if (newlyUsedView) {\n    //   if (items.length === 0) return;\n    //   if (i === items.length - 1) emit('scroll-end');\n    //   if (i === 0) emit('scroll-start');\n    // }\n\n    // Update position\n    if (itemSize === null) {\n      view.position = _sizes[i - 1]?.accumulator;\n      view.offset = 0;\n    } else {\n      view.position = Math.floor(i) * itemSize;\n      view.offset = (i % 1) * itemSize;\n    }\n  }\n\n  startIndex = _startIndex;\n  endIndex = _endIndex;\n\n  // After the user has finished scrolling\n  // Sort views so text selection is correct\n  clearTimeout(sortTimer);\n  sortTimer = setTimeout(_sortViews, 300);\n\n  return {\n    continuous,\n  };\n};\n\nconst _scrollToPosition = (position) => {\n  const direction = props.direction === 'vertical'\n    ? { scroll: 'scrollTop', start: 'top' }\n    : { scroll: 'scrollLeft', start: 'left' };\n\n  const viewport = scroller.value;\n  const scrollDirection = direction.scroll;\n\n  viewport[scrollDirection] = position;\n};\n\nconst scrollToItem = (index) => {\n  let scroll;\n  if (props.itemSize === null) {\n    scroll = index > 0 ? sizes.value[index - 1]?.accumulator : 0;\n  } else {\n    scroll = Math.floor(index) * props.itemSize;\n  }\n  _scrollToPosition(scroll);\n};\n\nconst handleScroll = () => {\n  const container = scroller.value;\n\n  if (userPosition.value !== 'middle') {\n    userPosition.value = 'middle';\n    emit('user-position', 'middle');\n  }\n\n  // Check if the scroll is at the top of the container\n  if (container.scrollTop === 0) {\n    userPosition.value = 'top';\n    emit('user-position', 'top');\n  }\n\n  // Check if the scroll is at the bottom of the container\n  if (container.scrollTop + container.clientHeight === container.scrollHeight) {\n    userPosition.value = 'bottom';\n    emit('user-position', 'bottom');\n  }\n\n  if (!scrollDirty) {\n    scrollDirty = true;\n    if (updateTimeout) return;\n\n    const requestUpdate = () => requestAnimationFrame(() => {\n      scrollDirty = false;\n      _updateVisibleItems(false, true);\n    });\n\n    requestUpdate();\n  }\n};\n\ndefineExpose({\n  scrollToItem,\n  _updateVisibleItems,\n});\n</script>\n","<script>\n/*\nThis is a code from external library (https://github.com/Akryum/vue-virtual-scroller/blob/master/packages/vue-virtual-scroller/src/components/DynamicScrollerItem.vue)\nWe have modified it for our own specific use.\n*/\nimport { h } from 'vue';\nimport { returnFirstEl } from '@/common/utils';\n\nexport default {\n  name: 'DtScrollerItem',\n\n  inject: [\n    'vscrollData',\n    'vscrollParent',\n    'vscrollResizeObserver',\n  ],\n\n  props: {\n    // eslint-disable-next-line vue/require-prop-types\n    item: {\n      required: true,\n    },\n\n    watchData: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Indicates if the view is actively used to display an item.\n     */\n    active: {\n      type: Boolean,\n      required: true,\n    },\n\n    index: {\n      type: Number,\n      default: undefined,\n    },\n\n    sizeDependencies: {\n      type: [Array, Object],\n      default: null,\n    },\n\n    tag: {\n      type: String,\n      default: 'div',\n    },\n  },\n\n  computed: {\n    id () {\n      if (this.vscrollData.simpleArray) return this.index;\n       \n      if (this.vscrollData.keyField in this.item) return this.item[this.vscrollData.keyField];\n      throw new Error(`keyField '${this.vscrollData.keyField}' not found in your item. You should set a valid keyField prop on your Scroller`);\n    },\n\n    size () {\n      return this.vscrollData.sizes[this.id] || 0;\n    },\n\n    finalActive () {\n      return this.active && this.vscrollData.active;\n    },\n  },\n\n  watch: {\n    watchData: 'updateWatchData',\n\n    id (value, oldValue) {\n      returnFirstEl(this.$el).$_vs_id = this.id;\n      if (!this.size) {\n        this.onDataUpdate();\n      }\n\n      if (this.$_sizeObserved) {\n        // In case the old item had the same size, it won't trigger the ResizeObserver\n        // since we are reusing the same DOM node\n        const oldSize = this.vscrollData.sizes[oldValue];\n        const size = this.vscrollData.sizes[value];\n        if (oldSize != null && oldSize !== size) {\n          this.applySize(oldSize);\n        }\n      }\n    },\n\n    finalActive (value) {\n      if (!this.size) {\n        if (value) {\n          if (!this.vscrollParent.$_undefinedMap[this.id]) {\n            this.vscrollParent.$_undefinedSizes++;\n            this.vscrollParent.$_undefinedMap[this.id] = true;\n          }\n        } else {\n          if (this.vscrollParent.$_undefinedMap[this.id]) {\n            this.vscrollParent.$_undefinedSizes--;\n            this.vscrollParent.$_undefinedMap[this.id] = false;\n          }\n        }\n      }\n\n      if (this.vscrollResizeObserver) {\n        if (value) {\n          this.observeSize();\n        } else {\n          this.unobserveSize();\n        }\n      } else if (value && this.$_pendingVScrollUpdate === this.id) {\n        this.updateSize();\n      }\n    },\n  },\n\n  created () {\n    if (this.$isServer) return;\n\n    this.$_forceNextVScrollUpdate = null;\n    this.updateWatchData();\n\n    if (!this.vscrollResizeObserver) {\n      for (const k in this.sizeDependencies) {\n        this.$watch(() => this.sizeDependencies[k], this.onDataUpdate);\n      }\n    }\n  },\n\n  mounted () {\n    if (this.finalActive) {\n      this.updateSize();\n      this.observeSize();\n    }\n  },\n\n  beforeUnmount () {\n    this.unobserveSize();\n  },\n\n  methods: {\n    updateSize () {\n      if (this.finalActive) {\n        if (this.$_pendingSizeUpdate !== this.id) {\n          this.$_pendingSizeUpdate = this.id;\n          this.$_forceNextVScrollUpdate = null;\n          this.$_pendingVScrollUpdate = null;\n          this.computeSize(this.id);\n        }\n      } else {\n        this.$_forceNextVScrollUpdate = this.id;\n      }\n    },\n\n    updateWatchData () {\n      if (this.watchData && !this.vscrollResizeObserver) {\n        this.$_watchData = this.$watch('item', () => {\n          this.onDataUpdate();\n        }, {\n          deep: true,\n        });\n      } else if (this.$_watchData) {\n        this.$_watchData();\n        this.$_watchData = null;\n      }\n    },\n\n    onVscrollUpdate ({ force }) {\n      // If not active, sechedule a size update when it becomes active\n      if (!this.finalActive && force) {\n        this.$_pendingVScrollUpdate = this.id;\n      }\n\n      if (this.$_forceNextVScrollUpdate === this.id || force || !this.size) {\n        this.updateSize();\n      }\n    },\n\n    onDataUpdate () {\n      this.updateSize();\n    },\n\n    computeSize (id) {\n      this.$nextTick(() => {\n        if (this.id === id) {\n          const width = returnFirstEl(this.$el).offsetWidth;\n          const height = returnFirstEl(this.$el).offsetHeight;\n          this.applyWidthHeight(width, height);\n        }\n        this.$_pendingSizeUpdate = null;\n      });\n    },\n\n    applyWidthHeight (width, height) {\n      const size = ~~(this.vscrollParent.direction === 'vertical' ? height : width);\n      if (size && this.size !== size) {\n        this.applySize(size);\n      }\n    },\n\n    applySize (size) {\n      if (this.vscrollParent.$_undefinedMap[this.id]) {\n        this.vscrollParent.$_undefinedSizes--;\n        this.vscrollParent.$_undefinedMap[this.id] = undefined;\n      }\n      this.vscrollData.sizes[this.id] = size;\n    },\n\n    observeSize () {\n      if (!this.vscrollResizeObserver) return;\n      if (this.$_sizeObserved) return;\n      this.vscrollResizeObserver.observe(returnFirstEl(this.$el));\n      this.$el.$_vs_id = this.id;\n      this.$el.$_vs_onResize = this.onResize;\n      this.$_sizeObserved = true;\n    },\n\n    unobserveSize () {\n      if (!this.vscrollResizeObserver) return;\n      if (!this.$_sizeObserved) return;\n      this.vscrollResizeObserver.unobserve(returnFirstEl(this.$el));\n      this.$el.$_vs_onResize = undefined;\n      this.$_sizeObserved = false;\n    },\n\n    onResize (id, width, height) {\n      if (this.id === id) {\n        this.applyWidthHeight(width, height);\n      }\n    },\n  },\n\n  render () {\n    return h(this.tag, this.$slots.default());\n  },\n};\n</script>\n","<template>\n  <core-scroller\n    ref=\"scroller\"\n    :items=\"itemsWithSize\"\n    :min-item-size=\"minItemSize\"\n    :direction=\"direction\"\n    :key-field=\"keyField\"\n    :list-tag=\"listTag\"\n    :item-tag=\"itemTag\"\n    v-bind=\"$attrs\"\n  >\n    <template\n      #default=\"{ item: itemWithSize, index, active }\"\n    >\n      <dt-scroller-item\n        :item=\"itemWithSize\"\n        :active=\"active\"\n        :size-dependencies=\"[\n          itemWithSize.message,\n        ]\"\n        :data-index=\"index\"\n      >\n        <slot\n          v-bind=\"{\n            item: itemWithSize.item,\n            index,\n            active,\n            itemWithSize,\n          }\"\n        />\n      </dt-scroller-item>\n    </template>\n  </core-scroller>\n</template>\n\n<!-- eslint-disable-next-line max-len -->\n<!-- This is a code from external library (https://github.com/Akryum/vue-virtual-scroller/blob/master/packages/vue-virtual-scroller/src/components/DynamicScroller.vue)\nWe have modified it for our own specific use. -->\n<script>\nimport CoreScroller from './CoreScroller.vue';\nimport DtScrollerItem from './ScrollerItem.vue';\nimport { returnFirstEl } from '@/common/utils';\n\nexport default {\n  name: 'DynamicScroller',\n\n  components: {\n    CoreScroller,\n    DtScrollerItem,\n  },\n\n  provide () {\n    if (typeof ResizeObserver !== 'undefined') {\n      this.$_resizeObserver = new ResizeObserver(entries => {\n        requestAnimationFrame(() => {\n          if (!Array.isArray(entries)) {\n            return;\n          }\n          for (const entry of entries) {\n            if (entry.target && entry.target.$_vs_onResize) {\n              let width, height;\n              if (entry.borderBoxSize) {\n                const resizeObserverSize = entry.borderBoxSize[0];\n                width = resizeObserverSize.inlineSize;\n                height = resizeObserverSize.blockSize;\n              } else {\n                // @TODO remove when contentRect is deprecated\n                width = entry.contentRect.width;\n                height = entry.contentRect.height;\n              }\n              entry.target.$_vs_onResize(entry.target.$_vs_id, width, height);\n            }\n          }\n        });\n      });\n    }\n\n    return {\n      vscrollData: this.vscrollData,\n      vscrollParent: this,\n      vscrollResizeObserver: this.$_resizeObserver,\n    };\n  },\n\n  inheritAttrs: false,\n\n  props: {\n    /*\n      * The items to render.\n      * If the items are simple arrays, the index will be used as the key.\n      * If the items are objects, the keyField will be used as the key.\n     */\n    items: {\n      type: Array,\n      required: true,\n    },\n\n    /*\n      * Indicates if the items are dynamic.\n      * If true, the items will be wrapped in a DtScrollerItem component.\n      * This is required for dynamic items to be able to react to changes in their size.\n     */\n    dynamic: {\n      type: Boolean,\n      default: false,\n    },\n\n    /*\n      * The key field to use for the items.\n      * Only used if the items are objects.\n     */\n    keyField: {\n      type: String,\n      default: 'id',\n    },\n\n    /*\n      * The direction of the scroller.\n      * Can be either 'vertical' or 'horizontal'.\n     */\n    direction: {\n      type: String,\n      default: 'vertical',\n      validator: (value) => ['vertical', 'horizontal'].includes(value),\n    },\n\n    /*\n      * The tag to use for the list.\n     */\n    listTag: {\n      type: String,\n      default: 'div',\n    },\n\n    /*\n      * The tag to use for the items.\n     */\n    itemTag: {\n      type: String,\n      default: 'div',\n    },\n\n    /*\n      * Display height (or width in horizontal mode) of the items in pixels\n      * used to calculate the scroll size and position.\n      * Is required for the initial render of items in DYNAMIC size mode.\n     */\n    minItemSize: {\n      type: [Number, String],\n    },\n  },\n\n  data () {\n    return {\n      vscrollData: {\n        active: true,\n        sizes: {},\n        keyField: this.keyField,\n        simpleArray: false,\n      },\n    };\n  },\n\n  computed: {\n    simpleArray () {\n      return this.items.length && typeof this.items[0] !== 'object';\n    },\n\n    itemsWithSize () {\n      const result = [];\n      const { items, keyField, simpleArray } = this;\n      const sizes = this.vscrollData.sizes;\n      const l = items.length;\n      for (let i = 0; i < l; i++) {\n        const item = items[i];\n        const id = simpleArray ? i : item[keyField];\n        let size = sizes[id];\n        if (typeof size === 'undefined' && !this.$_undefinedMap[id]) {\n          size = 0;\n        }\n        result.push({\n          item,\n          [keyField]: id,\n          size,\n        });\n      }\n      return result;\n    },\n  },\n\n  watch: {\n    simpleArray: {\n      handler (value) {\n        this.vscrollData.simpleArray = value;\n      },\n\n      immediate: true,\n    },\n\n    itemsWithSize (next, prev) {\n      const scrollTop = returnFirstEl(this.$el).scrollTop;\n\n      // Calculate total diff between prev and next sizes\n      // over current scroll top. Then add it to scrollTop to\n      // avoid jumping the contents that the user is seeing.\n      let prevActiveTop = 0; let activeTop = 0;\n      const length = Math.min(next.length, prev.length);\n      for (let i = 0; i < length; i++) {\n        if (prevActiveTop >= scrollTop) {\n          break;\n        }\n        prevActiveTop += prev[i].size || this.minItemSize;\n        activeTop += next[i].size || this.minItemSize;\n      }\n      const offset = activeTop - prevActiveTop;\n\n      if (offset === 0) {\n        return;\n      }\n\n      returnFirstEl(this.$el).scrollTop += offset;\n    },\n  },\n\n  beforeCreate () {\n    this.$_updates = [];\n    this.$_undefinedSizes = 0;\n    this.$_undefinedMap = {};\n  },\n\n  activated () {\n    this.vscrollData.active = true;\n  },\n\n  deactivated () {\n    this.vscrollData.active = false;\n  },\n\n  methods: {\n    dynamicScrollerUpdateItems () {\n      const scroller = this.$refs.scroller;\n      if (scroller) scroller._updateVisibleItems(true);\n    },\n\n    dynamicScrollerUpdateItemsFromBottom () {\n      const scroller = this.$refs.scroller;\n      if (scroller) scroller._updateVisibleItems(false, true);\n    },\n\n    scrollToItem (index) {\n      const scroller = this.$refs.scroller;\n      if (scroller) scroller.scrollToItem(index);\n    },\n\n    scrollToBottom () {\n      if (this.$_scrollingToBottom) return;\n      this.$_scrollingToBottom = true;\n      const el = returnFirstEl(this.$el);\n      // Item is inserted to the DOM\n      this.$nextTick(() => {\n        el.scrollTop = el.scrollHeight + 5000;\n        // Item sizes are computed\n        const cb = () => {\n          el.scrollTop = el.scrollHeight + 5000;\n          requestAnimationFrame(() => {\n            el.scrollTop = el.scrollHeight + 5000;\n            if (this.$_undefinedSizes === 0) {\n              this.$_scrollingToBottom = false;\n            } else {\n              requestAnimationFrame(cb);\n            }\n          });\n        };\n        requestAnimationFrame(cb);\n      });\n    },\n  },\n};\n</script>\n","<template>\n  <component\n    :is=\"dynamic ? DynamicScroller : CoreScroller\"\n    ref=\"scroller\"\n    data-qa=\"dt-scroller\"\n    :items=\"items\"\n    :item-size=\"itemSize\"\n    :min-item-size=\"minItemSize\"\n    :direction=\"direction\"\n    :key-field=\"keyField\"\n    :list-tag=\"listTag\"\n    :item-tag=\"itemTag\"\n    :style=\"computedStyle\"\n    tabindex=\"0\"\n    @user-position=\"$emit('user-position', $event)\"\n  >\n    <template\n      #default=\"{ item, index, active }\"\n    >\n      <slot\n        v-bind=\"{\n          item: item,\n          index,\n          active,\n        }\"\n      />\n    </template>\n  </component>\n</template>\n\n<script setup>\nimport CoreScroller from './Modules/CoreScroller.vue';\nimport DynamicScroller from './Modules/DynamicScroller.vue';\nimport { provide, computed, watch, ref } from 'vue';\n\ndefineOptions({\n  name: 'DtScroller',\n});\n\nconst props = defineProps({\n  /**\n      * The direction of the scroller.\n      * @values vertical, horizontal\n     */\n  direction: {\n    type: String,\n    default: 'vertical',\n    validator: (value) => ['vertical', 'horizontal'].includes(value),\n  },\n\n  /**\n     * Indicates if the items need to react to changes in their size.\n     * If disabled the itemSize prop is required and you will get improved performance.\n     * If enabled the minItemSize prop is required and you\n     * will have reduced performance but the ability to reactively size list items\n      * @values true, false\n     */\n  dynamic: {\n    type: Boolean,\n    default: false,\n  },\n\n  /**\n      * Display height (or width in horizontal mode) of the items in pixels\n      * used to calculate the scroll size and position.\n     *  Required if DYNAMIC is false\n     */\n  itemSize: {\n    type: Number,\n    default: null,\n  },\n\n  /**\n      * The tag to use for the items.\n     */\n  itemTag: {\n    type: String,\n    default: 'div',\n  },\n\n  /**\n      * The items to render.\n      * If the items are simple arrays, the index will be used as the key.\n      * If the items are objects, the keyField will be used as the key.\n     * @example items: [ 'item1', 'item2', 'item3' ]\n     * @example items: [ { id: 1, name: 'item1' }, { id: 2, name: 'item2' }, { id: 3, name: 'item3' } ]\n     */\n  items: {\n    type: Array,\n    required: true,\n  },\n\n  /**\n      * The key field to use for the items.\n      * If the items are objects, the scroller needs to be able to identify them.\n      * By default it will look for an id field on the items.\n      * This can be configured with this prop if you are using another field name.\n     */\n  keyField: {\n    type: String,\n    default: 'id',\n  },\n\n  /**\n      * The tag to use for the list.\n     */\n  listTag: {\n    type: String,\n    default: 'div',\n  },\n\n  /**\n      * Minimum size used if the height (or width in horizontal mode) of a item is unknown.\n      * Is required for the initial render of items in DYNAMIC size mode.\n     */\n  minItemSize: {\n    type: [Number, String],\n    default: null,\n  },\n\n  /**\n      * The height of the scroller.\n      * Can be a number (in pixels) or a string (in CSS units).\n     */\n  scrollerHeight: {\n    type: [String, Number],\n    default: '100%',\n  },\n\n  /**\n    * The width of the scroller.\n    * Can be a number (in pixels) or a string (in CSS units).\n    */\n  scrollerWidth: {\n    type: [String, Number],\n    default: '100%',\n  },\n});\n\nconst emits = defineEmits([\n  /**\n   * Describe when the scroller changes from start/middle/end\n   * @param {string} position The position of the scroller.\n   * @values start, middle, end\n   */\n  'user-position',\n]);\n\nprovide('emit', emits);\n\nconst scroller = ref(null);\n\nconst computedStyle = computed(() => {\n  return {\n    width: typeof props.scrollerWidth === 'number' ? `${props.scrollerWidth}px` : props.scrollerWidth,\n    height: typeof props.scrollerHeight === 'number' ? `${props.scrollerHeight}px` : props.scrollerHeight,\n  };\n});\n\nwatch(props, () => {\n  validateProps();\n}, { deep: true, immediate: true });\n\nfunction scrollToBottom () {\n  if (scroller.value) scroller.value.scrollToBottom();\n}\n\nfunction scrollToItem (index) {\n  if (scroller.value) scroller.value.scrollToItem(index);\n}\n\nfunction updateItems () {\n  if (!scroller.value) return;\n  if (props.dynamic) {\n    scroller.value.dynamicScrollerUpdateItems();\n  } else {\n    scroller.value._updateVisibleItems(true);\n  }\n}\n\nfunction updateItemsFromBottom () {\n  if (!scroller.value) return;\n  if (props.dynamic) {\n    scroller.value.dynamicScrollerUpdateItemsFromBottom();\n  } else {\n    scroller.value._updateVisibleItems(false, true);\n  }\n}\n\nfunction validateProps () {\n  if (props.dynamic && !props.minItemSize) {\n    console.error('scroller error: \\'minItemSize\\' is required on \\'dynamic\\' mode.');\n  }\n\n  if (!props.dynamic && !props.itemSize) {\n    console.error('scroller error: \\'itemSize\\' is required.');\n  }\n}\n\ndefineExpose({\n  scrollToBottom,\n  scrollToItem,\n  updateItems,\n  updateItemsFromBottom,\n});\n</script>\n"],"mappings":"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"}

package/dist/TextList-B6XFfQfD.js

@@ -0,0 +1,88 @@
+import { DT_TEXT_LIST_CONTEXT as e, DT_TEXT_LIST_DEFAULT_TYPE as t, DT_TEXT_LIST_ORDERED_MARKERS as n, DT_TEXT_LIST_UNORDERED_MARKERS as r } from "./lib/text-list/text-list-constants.js";
+import { textListGapValidator as i, textListMarkerToneValidator as a, textListMarkerValidator as o, textListTypeValidator as s } from "./lib/text-list/validators.js";
+import { computed as c, createBlock as l, defineComponent as u, normalizeClass as d, onMounted as f, openBlock as p, provide as m, ref as h, renderSlot as g, resolveDynamicComponent as _, toRef as v, withCtx as y } from "vue";
+//#endregion
+//#region components/TextList/TextList.vue
+var b = /* @__PURE__ */ u({
+	name: "DtTextList",
+	__name: "TextList",
+	props: {
+		type: {
+			type: String,
+			default: t,
+			validator: s
+		},
+		marker: {
+			type: String,
+			default: void 0,
+			validator: o
+		},
+		markerTone: {
+			type: String,
+			default: void 0,
+			validator: a
+		},
+		gap: {
+			type: String,
+			default: void 0,
+			validator: i
+		},
+		start: {
+			type: Number,
+			default: void 0
+		},
+		reversed: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	setup(t) {
+		let i = t, a = h(null);
+		m(e, { type: v(i, "type") });
+		let o = c(() => i.type === "ordered"), s = c(() => o.value ? "ol" : "ul"), u = c(() => i.marker === "none" ? "list" : void 0), b = c(() => o.value ? i.start : void 0), x = c(() => o.value && i.reversed ? !0 : void 0), S = c(() => [
+			"d-text-list",
+			i.gap ? `d-text-list--gap-${i.gap}` : null,
+			{ "d-text-list--ordered": o.value },
+			i.marker ? `d-text-list--marker-${i.marker}` : null,
+			i.markerTone ? `d-text-list--marker-tone-${i.markerTone}` : null
+		]), C = (e) => console.warn(`[DtTextList] ${e}`);
+		function w() {
+			o.value || (i.start !== void 0 && C("The start prop only applies when type=\"ordered\"."), i.reversed && C("The reversed prop only applies when type=\"ordered\"."));
+		}
+		function T() {
+			!i.marker || i.marker === "none" || (i.type === "ordered" && r.includes(i.marker) && C(`The marker="${i.marker}" value is usually used with type="unordered".`), i.type === "unordered" && n.includes(i.marker) && C(`The marker="${i.marker}" value is usually used with type="ordered".`));
+		}
+		function E() {
+			let e = a.value?.$el ?? a.value;
+			if (e) {
+				for (let t of e.children) if (t.tagName !== "LI") {
+					C("Use DtTextListItem or a native li as the direct child of DtTextList.");
+					break;
+				}
+			}
+		}
+		return f(() => {
+			process.env.NODE_ENV !== "production" && (w(), T(), E());
+		}), (e, t) => (p(), l(_(s.value), {
+			ref_key: "listRef",
+			ref: a,
+			"data-qa": "dt-text-list",
+			class: d(S.value),
+			role: u.value,
+			start: b.value,
+			reversed: x.value
+		}, {
+			default: y(() => [g(e.$slots, "default")]),
+			_: 3
+		}, 8, [
+			"class",
+			"role",
+			"start",
+			"reversed"
+		]));
+	}
+});
+//#endregion
+export { b as t };
+
+//# sourceMappingURL=TextList-B6XFfQfD.js.map

package/dist/TextList-B6XFfQfD.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextList-B6XFfQfD.js","names":[],"sources":["../components/TextList/TextList.vue","../components/TextList/TextList.vue"],"sourcesContent":["<!-- eslint-disable vue/no-restricted-class -->\n<template>\n  <component\n    :is=\"listElement\"\n    ref=\"listRef\"\n    data-qa=\"dt-text-list\"\n    :class=\"textListClasses\"\n    :role=\"role\"\n    :start=\"orderedStart\"\n    :reversed=\"orderedReversed\"\n  >\n    <!-- @slot Text list items. Use DtTextListItem as the direct child. -->\n    <slot />\n  </component>\n</template>\n\n<script setup lang=\"ts\">\n// @ts-nocheck\nimport {\n  computed,\n  onMounted,\n  provide,\n  ref,\n  toRef,\n} from 'vue';\nimport {\n  DT_TEXT_LIST_CONTEXT,\n  DT_TEXT_LIST_DEFAULT_TYPE,\n  DT_TEXT_LIST_ORDERED_MARKERS,\n  DT_TEXT_LIST_UNORDERED_MARKERS,\n} from './TextListConstants';\nimport {\n  textListGapValidator,\n  textListMarkerToneValidator,\n  textListMarkerValidator,\n  textListTypeValidator,\n} from './Validators';\n\ndefineOptions({\n  name: 'DtTextList',\n});\n\nconst props = defineProps({\n  /**\n   * Semantic list type. Sets the rendered element to `ul` or `ol`.\n   * @values unordered, ordered\n   */\n  type: {\n    type: String,\n    default: DT_TEXT_LIST_DEFAULT_TYPE,\n    validator: textListTypeValidator,\n  },\n\n  /**\n   * Visual marker style. Leave unset for automatic depth-aware markers.\n   * @values disc, circle, square, decimal, lower-alpha, upper-alpha, lower-roman, upper-roman, none\n   */\n  marker: {\n    type: String,\n    default: undefined,\n    validator: textListMarkerValidator,\n  },\n\n  /**\n   * Marker foreground tone. Uses the same tone vocabulary as DtText.\n   * @values primary, secondary, tertiary, muted, disabled, placeholder, critical, critical-strong, positive, positive-strong, warning, info, info-strong, neutral-black, neutral-white\n   */\n  markerTone: {\n    type: String,\n    default: undefined,\n    validator: textListMarkerToneValidator,\n  },\n\n  /**\n   * Space between list items and before nested lists.\n   * @values 0, 1, 25, 50, 75, 100, 125, 150, 175, 200, 250, 300, 350, 400\n   */\n  gap: {\n    type: String,\n    default: undefined,\n    validator: textListGapValidator,\n  },\n\n  /**\n   * Starting number for ordered lists.\n   */\n  start: {\n    type: Number,\n    default: undefined,\n  },\n\n  /**\n   * Reverse ordered list numbering.\n   */\n  reversed: {\n    type: Boolean,\n    default: false,\n  },\n});\n\nconst listRef = ref(null);\n\nprovide(DT_TEXT_LIST_CONTEXT, {\n  type: toRef(props, 'type'),\n});\n\nconst isOrdered = computed(() => props.type === 'ordered');\nconst listElement = computed(() => isOrdered.value ? 'ol' : 'ul');\n// Safari drops list semantics when list-style is none; restore them explicitly.\nconst role = computed(() => props.marker === 'none' ? 'list' : undefined);\nconst orderedStart = computed(() => isOrdered.value ? props.start : undefined);\nconst orderedReversed = computed(() => isOrdered.value && props.reversed ? true : undefined);\n\nconst textListClasses = computed(() => [\n  'd-text-list',\n  props.gap ? `d-text-list--gap-${props.gap}` : null,\n  {\n    'd-text-list--ordered': isOrdered.value,\n  },\n  props.marker ? `d-text-list--marker-${props.marker}` : null,\n  props.markerTone ? `d-text-list--marker-tone-${props.markerTone}` : null,\n]);\n\n// eslint-disable-next-line no-console\nconst warn = message => console.warn(`[DtTextList] ${message}`);\n\nfunction validateOrderedOnlyProps () {\n  if (isOrdered.value) return;\n\n  if (props.start !== undefined) {\n    warn('The start prop only applies when type=\"ordered\".');\n  }\n\n  if (props.reversed) {\n    warn('The reversed prop only applies when type=\"ordered\".');\n  }\n}\n\nfunction validateMarkerFamily () {\n  if (!props.marker || props.marker === 'none') return;\n\n  if (props.type === 'ordered' && DT_TEXT_LIST_UNORDERED_MARKERS.includes(props.marker)) {\n    warn(`The marker=\"${props.marker}\" value is usually used with type=\"unordered\".`);\n  }\n\n  if (props.type === 'unordered' && DT_TEXT_LIST_ORDERED_MARKERS.includes(props.marker)) {\n    warn(`The marker=\"${props.marker}\" value is usually used with type=\"ordered\".`);\n  }\n}\n\nfunction validateChildren () {\n  const rootElement = listRef.value?.$el ?? listRef.value;\n  if (!rootElement) return;\n\n  for (const child of rootElement.children) {\n    if (child.tagName === 'LI') continue;\n\n    warn('Use DtTextListItem or a native li as the direct child of DtTextList.');\n    break;\n  }\n}\n\nonMounted(() => {\n  if (process.env.NODE_ENV !== 'production') {\n    validateOrderedOnlyProps();\n    validateMarkerFamily();\n    validateChildren();\n  }\n});\n</script>\n","<!-- eslint-disable vue/no-restricted-class -->\n<template>\n  <component\n    :is=\"listElement\"\n    ref=\"listRef\"\n    data-qa=\"dt-text-list\"\n    :class=\"textListClasses\"\n    :role=\"role\"\n    :start=\"orderedStart\"\n    :reversed=\"orderedReversed\"\n  >\n    <!-- @slot Text list items. Use DtTextListItem as the direct child. -->\n    <slot />\n  </component>\n</template>\n\n<script setup lang=\"ts\">\n// @ts-nocheck\nimport {\n  computed,\n  onMounted,\n  provide,\n  ref,\n  toRef,\n} from 'vue';\nimport {\n  DT_TEXT_LIST_CONTEXT,\n  DT_TEXT_LIST_DEFAULT_TYPE,\n  DT_TEXT_LIST_ORDERED_MARKERS,\n  DT_TEXT_LIST_UNORDERED_MARKERS,\n} from './TextListConstants';\nimport {\n  textListGapValidator,\n  textListMarkerToneValidator,\n  textListMarkerValidator,\n  textListTypeValidator,\n} from './Validators';\n\ndefineOptions({\n  name: 'DtTextList',\n});\n\nconst props = defineProps({\n  /**\n   * Semantic list type. Sets the rendered element to `ul` or `ol`.\n   * @values unordered, ordered\n   */\n  type: {\n    type: String,\n    default: DT_TEXT_LIST_DEFAULT_TYPE,\n    validator: textListTypeValidator,\n  },\n\n  /**\n   * Visual marker style. Leave unset for automatic depth-aware markers.\n   * @values disc, circle, square, decimal, lower-alpha, upper-alpha, lower-roman, upper-roman, none\n   */\n  marker: {\n    type: String,\n    default: undefined,\n    validator: textListMarkerValidator,\n  },\n\n  /**\n   * Marker foreground tone. Uses the same tone vocabulary as DtText.\n   * @values primary, secondary, tertiary, muted, disabled, placeholder, critical, critical-strong, positive, positive-strong, warning, info, info-strong, neutral-black, neutral-white\n   */\n  markerTone: {\n    type: String,\n    default: undefined,\n    validator: textListMarkerToneValidator,\n  },\n\n  /**\n   * Space between list items and before nested lists.\n   * @values 0, 1, 25, 50, 75, 100, 125, 150, 175, 200, 250, 300, 350, 400\n   */\n  gap: {\n    type: String,\n    default: undefined,\n    validator: textListGapValidator,\n  },\n\n  /**\n   * Starting number for ordered lists.\n   */\n  start: {\n    type: Number,\n    default: undefined,\n  },\n\n  /**\n   * Reverse ordered list numbering.\n   */\n  reversed: {\n    type: Boolean,\n    default: false,\n  },\n});\n\nconst listRef = ref(null);\n\nprovide(DT_TEXT_LIST_CONTEXT, {\n  type: toRef(props, 'type'),\n});\n\nconst isOrdered = computed(() => props.type === 'ordered');\nconst listElement = computed(() => isOrdered.value ? 'ol' : 'ul');\n// Safari drops list semantics when list-style is none; restore them explicitly.\nconst role = computed(() => props.marker === 'none' ? 'list' : undefined);\nconst orderedStart = computed(() => isOrdered.value ? props.start : undefined);\nconst orderedReversed = computed(() => isOrdered.value && props.reversed ? true : undefined);\n\nconst textListClasses = computed(() => [\n  'd-text-list',\n  props.gap ? `d-text-list--gap-${props.gap}` : null,\n  {\n    'd-text-list--ordered': isOrdered.value,\n  },\n  props.marker ? `d-text-list--marker-${props.marker}` : null,\n  props.markerTone ? `d-text-list--marker-tone-${props.markerTone}` : null,\n]);\n\n// eslint-disable-next-line no-console\nconst warn = message => console.warn(`[DtTextList] ${message}`);\n\nfunction validateOrderedOnlyProps () {\n  if (isOrdered.value) return;\n\n  if (props.start !== undefined) {\n    warn('The start prop only applies when type=\"ordered\".');\n  }\n\n  if (props.reversed) {\n    warn('The reversed prop only applies when type=\"ordered\".');\n  }\n}\n\nfunction validateMarkerFamily () {\n  if (!props.marker || props.marker === 'none') return;\n\n  if (props.type === 'ordered' && DT_TEXT_LIST_UNORDERED_MARKERS.includes(props.marker)) {\n    warn(`The marker=\"${props.marker}\" value is usually used with type=\"unordered\".`);\n  }\n\n  if (props.type === 'unordered' && DT_TEXT_LIST_ORDERED_MARKERS.includes(props.marker)) {\n    warn(`The marker=\"${props.marker}\" value is usually used with type=\"ordered\".`);\n  }\n}\n\nfunction validateChildren () {\n  const rootElement = listRef.value?.$el ?? listRef.value;\n  if (!rootElement) return;\n\n  for (const child of rootElement.children) {\n    if (child.tagName === 'LI') continue;\n\n    warn('Use DtTextListItem or a native li as the direct child of DtTextList.');\n    break;\n  }\n}\n\nonMounted(() => {\n  if (process.env.NODE_ENV !== 'production') {\n    validateOrderedOnlyProps();\n    validateMarkerFamily();\n    validateChildren();\n  }\n});\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0CA,IAAM,IAAQ,GA0DR,IAAU,EAAI,KAAK;AAEzB,IAAQ,GAAsB,EAC5B,MAAM,EAAM,GAAO,OAAO,EAC3B,CAAC;EAEF,IAAM,IAAY,QAAe,EAAM,SAAS,UAAU,EACpD,IAAc,QAAe,EAAU,QAAQ,OAAO,KAAK,EAE3D,IAAO,QAAe,EAAM,WAAW,SAAS,SAAS,KAAA,EAAU,EACnE,IAAe,QAAe,EAAU,QAAQ,EAAM,QAAQ,KAAA,EAAU,EACxE,IAAkB,QAAe,EAAU,SAAS,EAAM,WAAW,KAAO,KAAA,EAAU,EAEtF,IAAkB,QAAe;GACrC;GACA,EAAM,MAAM,oBAAoB,EAAM,QAAQ;GAC9C,EACE,wBAAwB,EAAU,OACnC;GACD,EAAM,SAAS,uBAAuB,EAAM,WAAW;GACvD,EAAM,aAAa,4BAA4B,EAAM,eAAe;GACrE,CAAC,EAGI,KAAO,MAAW,QAAQ,KAAK,gBAAgB,IAAU;EAE/D,SAAS,IAA4B;AAC/B,KAAU,UAEV,EAAM,UAAU,KAAA,KAClB,EAAK,qDAAmD,EAGtD,EAAM,YACR,EAAK,wDAAsD;;EAI/D,SAAS,IAAwB;AAC3B,IAAC,EAAM,UAAU,EAAM,WAAW,WAElC,EAAM,SAAS,aAAa,EAA+B,SAAS,EAAM,OAAO,IACnF,EAAK,eAAe,EAAM,OAAO,gDAAgD,EAG/E,EAAM,SAAS,eAAe,EAA6B,SAAS,EAAM,OAAO,IACnF,EAAK,eAAe,EAAM,OAAO,8CAA8C;;EAInF,SAAS,IAAoB;GAC3B,IAAM,IAAc,EAAQ,OAAO,OAAO,EAAQ;AAC7C,UAEL;SAAK,IAAM,KAAS,EAAY,SAC1B,OAAM,YAAY,MAEtB;OAAK,uEAAuE;AAC5E;;;;SAIJ,QAAgB;AACd,GAAA,QAAA,IAAA,aAA6B,iBAC3B,GAA0B,EAC1B,GAAsB,EACtB,GAAkB;IAEpB,kBAtKA,EAWY,EAVL,EAAA,MAAW,EAAA;YACZ;GAAJ,KAAI;GACJ,WAAQ;GACP,OAAK,EAAE,EAAA,MAAe;GACtB,MAAM,EAAA;GACN,OAAO,EAAA;GACP,UAAU,EAAA;;oBAGH,CAAR,EAAQ,EAAA,QAAA,UAAA,CAAA,CAAA"}

package/dist/TextList-Dd-ROFiI.cjs

@@ -0,0 +1,2 @@
+require(`./chunk-Bmb41Sf3.cjs`);const e=require(`./lib/text-list/text-list-constants.cjs`),t=require(`./lib/text-list/validators.cjs`);let n=require(`vue`);var r=(0,n.defineComponent)({name:`DtTextList`,__name:`TextList`,props:{type:{type:String,default:e.DT_TEXT_LIST_DEFAULT_TYPE,validator:t.textListTypeValidator},marker:{type:String,default:void 0,validator:t.textListMarkerValidator},markerTone:{type:String,default:void 0,validator:t.textListMarkerToneValidator},gap:{type:String,default:void 0,validator:t.textListGapValidator},start:{type:Number,default:void 0},reversed:{type:Boolean,default:!1}},setup(t){let r=t,i=(0,n.ref)(null);(0,n.provide)(e.DT_TEXT_LIST_CONTEXT,{type:(0,n.toRef)(r,`type`)});let a=(0,n.computed)(()=>r.type===`ordered`),o=(0,n.computed)(()=>a.value?`ol`:`ul`),s=(0,n.computed)(()=>r.marker===`none`?`list`:void 0),c=(0,n.computed)(()=>a.value?r.start:void 0),l=(0,n.computed)(()=>a.value&&r.reversed?!0:void 0),u=(0,n.computed)(()=>[`d-text-list`,r.gap?`d-text-list--gap-${r.gap}`:null,{"d-text-list--ordered":a.value},r.marker?`d-text-list--marker-${r.marker}`:null,r.markerTone?`d-text-list--marker-tone-${r.markerTone}`:null]),d=e=>console.warn(`[DtTextList] ${e}`);function f(){a.value||(r.start!==void 0&&d(`The start prop only applies when type="ordered".`),r.reversed&&d(`The reversed prop only applies when type="ordered".`))}function p(){!r.marker||r.marker===`none`||(r.type===`ordered`&&e.DT_TEXT_LIST_UNORDERED_MARKERS.includes(r.marker)&&d(`The marker="${r.marker}" value is usually used with type="unordered".`),r.type===`unordered`&&e.DT_TEXT_LIST_ORDERED_MARKERS.includes(r.marker)&&d(`The marker="${r.marker}" value is usually used with type="ordered".`))}function m(){let e=i.value?.$el??i.value;if(e){for(let t of e.children)if(t.tagName!==`LI`){d(`Use DtTextListItem or a native li as the direct child of DtTextList.`);break}}}return(0,n.onMounted)(()=>{process.env.NODE_ENV!==`production`&&(f(),p(),m())}),(e,t)=>((0,n.openBlock)(),(0,n.createBlock)((0,n.resolveDynamicComponent)(o.value),{ref_key:`listRef`,ref:i,"data-qa":`dt-text-list`,class:(0,n.normalizeClass)(u.value),role:s.value,start:c.value,reversed:l.value},{default:(0,n.withCtx)(()=>[(0,n.renderSlot)(e.$slots,`default`)]),_:3},8,[`class`,`role`,`start`,`reversed`]))}});Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return r}});
+//# sourceMappingURL=TextList-Dd-ROFiI.cjs.map

package/dist/TextList-Dd-ROFiI.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextList-Dd-ROFiI.cjs","names":[],"sources":["../components/TextList/TextList.vue","../components/TextList/TextList.vue"],"sourcesContent":["<!-- eslint-disable vue/no-restricted-class -->\n<template>\n  <component\n    :is=\"listElement\"\n    ref=\"listRef\"\n    data-qa=\"dt-text-list\"\n    :class=\"textListClasses\"\n    :role=\"role\"\n    :start=\"orderedStart\"\n    :reversed=\"orderedReversed\"\n  >\n    <!-- @slot Text list items. Use DtTextListItem as the direct child. -->\n    <slot />\n  </component>\n</template>\n\n<script setup lang=\"ts\">\n// @ts-nocheck\nimport {\n  computed,\n  onMounted,\n  provide,\n  ref,\n  toRef,\n} from 'vue';\nimport {\n  DT_TEXT_LIST_CONTEXT,\n  DT_TEXT_LIST_DEFAULT_TYPE,\n  DT_TEXT_LIST_ORDERED_MARKERS,\n  DT_TEXT_LIST_UNORDERED_MARKERS,\n} from './TextListConstants';\nimport {\n  textListGapValidator,\n  textListMarkerToneValidator,\n  textListMarkerValidator,\n  textListTypeValidator,\n} from './Validators';\n\ndefineOptions({\n  name: 'DtTextList',\n});\n\nconst props = defineProps({\n  /**\n   * Semantic list type. Sets the rendered element to `ul` or `ol`.\n   * @values unordered, ordered\n   */\n  type: {\n    type: String,\n    default: DT_TEXT_LIST_DEFAULT_TYPE,\n    validator: textListTypeValidator,\n  },\n\n  /**\n   * Visual marker style. Leave unset for automatic depth-aware markers.\n   * @values disc, circle, square, decimal, lower-alpha, upper-alpha, lower-roman, upper-roman, none\n   */\n  marker: {\n    type: String,\n    default: undefined,\n    validator: textListMarkerValidator,\n  },\n\n  /**\n   * Marker foreground tone. Uses the same tone vocabulary as DtText.\n   * @values primary, secondary, tertiary, muted, disabled, placeholder, critical, critical-strong, positive, positive-strong, warning, info, info-strong, neutral-black, neutral-white\n   */\n  markerTone: {\n    type: String,\n    default: undefined,\n    validator: textListMarkerToneValidator,\n  },\n\n  /**\n   * Space between list items and before nested lists.\n   * @values 0, 1, 25, 50, 75, 100, 125, 150, 175, 200, 250, 300, 350, 400\n   */\n  gap: {\n    type: String,\n    default: undefined,\n    validator: textListGapValidator,\n  },\n\n  /**\n   * Starting number for ordered lists.\n   */\n  start: {\n    type: Number,\n    default: undefined,\n  },\n\n  /**\n   * Reverse ordered list numbering.\n   */\n  reversed: {\n    type: Boolean,\n    default: false,\n  },\n});\n\nconst listRef = ref(null);\n\nprovide(DT_TEXT_LIST_CONTEXT, {\n  type: toRef(props, 'type'),\n});\n\nconst isOrdered = computed(() => props.type === 'ordered');\nconst listElement = computed(() => isOrdered.value ? 'ol' : 'ul');\n// Safari drops list semantics when list-style is none; restore them explicitly.\nconst role = computed(() => props.marker === 'none' ? 'list' : undefined);\nconst orderedStart = computed(() => isOrdered.value ? props.start : undefined);\nconst orderedReversed = computed(() => isOrdered.value && props.reversed ? true : undefined);\n\nconst textListClasses = computed(() => [\n  'd-text-list',\n  props.gap ? `d-text-list--gap-${props.gap}` : null,\n  {\n    'd-text-list--ordered': isOrdered.value,\n  },\n  props.marker ? `d-text-list--marker-${props.marker}` : null,\n  props.markerTone ? `d-text-list--marker-tone-${props.markerTone}` : null,\n]);\n\n// eslint-disable-next-line no-console\nconst warn = message => console.warn(`[DtTextList] ${message}`);\n\nfunction validateOrderedOnlyProps () {\n  if (isOrdered.value) return;\n\n  if (props.start !== undefined) {\n    warn('The start prop only applies when type=\"ordered\".');\n  }\n\n  if (props.reversed) {\n    warn('The reversed prop only applies when type=\"ordered\".');\n  }\n}\n\nfunction validateMarkerFamily () {\n  if (!props.marker || props.marker === 'none') return;\n\n  if (props.type === 'ordered' && DT_TEXT_LIST_UNORDERED_MARKERS.includes(props.marker)) {\n    warn(`The marker=\"${props.marker}\" value is usually used with type=\"unordered\".`);\n  }\n\n  if (props.type === 'unordered' && DT_TEXT_LIST_ORDERED_MARKERS.includes(props.marker)) {\n    warn(`The marker=\"${props.marker}\" value is usually used with type=\"ordered\".`);\n  }\n}\n\nfunction validateChildren () {\n  const rootElement = listRef.value?.$el ?? listRef.value;\n  if (!rootElement) return;\n\n  for (const child of rootElement.children) {\n    if (child.tagName === 'LI') continue;\n\n    warn('Use DtTextListItem or a native li as the direct child of DtTextList.');\n    break;\n  }\n}\n\nonMounted(() => {\n  if (process.env.NODE_ENV !== 'production') {\n    validateOrderedOnlyProps();\n    validateMarkerFamily();\n    validateChildren();\n  }\n});\n</script>\n","<!-- eslint-disable vue/no-restricted-class -->\n<template>\n  <component\n    :is=\"listElement\"\n    ref=\"listRef\"\n    data-qa=\"dt-text-list\"\n    :class=\"textListClasses\"\n    :role=\"role\"\n    :start=\"orderedStart\"\n    :reversed=\"orderedReversed\"\n  >\n    <!-- @slot Text list items. Use DtTextListItem as the direct child. -->\n    <slot />\n  </component>\n</template>\n\n<script setup lang=\"ts\">\n// @ts-nocheck\nimport {\n  computed,\n  onMounted,\n  provide,\n  ref,\n  toRef,\n} from 'vue';\nimport {\n  DT_TEXT_LIST_CONTEXT,\n  DT_TEXT_LIST_DEFAULT_TYPE,\n  DT_TEXT_LIST_ORDERED_MARKERS,\n  DT_TEXT_LIST_UNORDERED_MARKERS,\n} from './TextListConstants';\nimport {\n  textListGapValidator,\n  textListMarkerToneValidator,\n  textListMarkerValidator,\n  textListTypeValidator,\n} from './Validators';\n\ndefineOptions({\n  name: 'DtTextList',\n});\n\nconst props = defineProps({\n  /**\n   * Semantic list type. Sets the rendered element to `ul` or `ol`.\n   * @values unordered, ordered\n   */\n  type: {\n    type: String,\n    default: DT_TEXT_LIST_DEFAULT_TYPE,\n    validator: textListTypeValidator,\n  },\n\n  /**\n   * Visual marker style. Leave unset for automatic depth-aware markers.\n   * @values disc, circle, square, decimal, lower-alpha, upper-alpha, lower-roman, upper-roman, none\n   */\n  marker: {\n    type: String,\n    default: undefined,\n    validator: textListMarkerValidator,\n  },\n\n  /**\n   * Marker foreground tone. Uses the same tone vocabulary as DtText.\n   * @values primary, secondary, tertiary, muted, disabled, placeholder, critical, critical-strong, positive, positive-strong, warning, info, info-strong, neutral-black, neutral-white\n   */\n  markerTone: {\n    type: String,\n    default: undefined,\n    validator: textListMarkerToneValidator,\n  },\n\n  /**\n   * Space between list items and before nested lists.\n   * @values 0, 1, 25, 50, 75, 100, 125, 150, 175, 200, 250, 300, 350, 400\n   */\n  gap: {\n    type: String,\n    default: undefined,\n    validator: textListGapValidator,\n  },\n\n  /**\n   * Starting number for ordered lists.\n   */\n  start: {\n    type: Number,\n    default: undefined,\n  },\n\n  /**\n   * Reverse ordered list numbering.\n   */\n  reversed: {\n    type: Boolean,\n    default: false,\n  },\n});\n\nconst listRef = ref(null);\n\nprovide(DT_TEXT_LIST_CONTEXT, {\n  type: toRef(props, 'type'),\n});\n\nconst isOrdered = computed(() => props.type === 'ordered');\nconst listElement = computed(() => isOrdered.value ? 'ol' : 'ul');\n// Safari drops list semantics when list-style is none; restore them explicitly.\nconst role = computed(() => props.marker === 'none' ? 'list' : undefined);\nconst orderedStart = computed(() => isOrdered.value ? props.start : undefined);\nconst orderedReversed = computed(() => isOrdered.value && props.reversed ? true : undefined);\n\nconst textListClasses = computed(() => [\n  'd-text-list',\n  props.gap ? `d-text-list--gap-${props.gap}` : null,\n  {\n    'd-text-list--ordered': isOrdered.value,\n  },\n  props.marker ? `d-text-list--marker-${props.marker}` : null,\n  props.markerTone ? `d-text-list--marker-tone-${props.markerTone}` : null,\n]);\n\n// eslint-disable-next-line no-console\nconst warn = message => console.warn(`[DtTextList] ${message}`);\n\nfunction validateOrderedOnlyProps () {\n  if (isOrdered.value) return;\n\n  if (props.start !== undefined) {\n    warn('The start prop only applies when type=\"ordered\".');\n  }\n\n  if (props.reversed) {\n    warn('The reversed prop only applies when type=\"ordered\".');\n  }\n}\n\nfunction validateMarkerFamily () {\n  if (!props.marker || props.marker === 'none') return;\n\n  if (props.type === 'ordered' && DT_TEXT_LIST_UNORDERED_MARKERS.includes(props.marker)) {\n    warn(`The marker=\"${props.marker}\" value is usually used with type=\"unordered\".`);\n  }\n\n  if (props.type === 'unordered' && DT_TEXT_LIST_ORDERED_MARKERS.includes(props.marker)) {\n    warn(`The marker=\"${props.marker}\" value is usually used with type=\"ordered\".`);\n  }\n}\n\nfunction validateChildren () {\n  const rootElement = listRef.value?.$el ?? listRef.value;\n  if (!rootElement) return;\n\n  for (const child of rootElement.children) {\n    if (child.tagName === 'LI') continue;\n\n    warn('Use DtTextListItem or a native li as the direct child of DtTextList.');\n    break;\n  }\n}\n\nonMounted(() => {\n  if (process.env.NODE_ENV !== 'production') {\n    validateOrderedOnlyProps();\n    validateMarkerFamily();\n    validateChildren();\n  }\n});\n</script>\n"],"mappings":"umBA0CA,IAAM,EAAQ,EA0DR,GAAA,EAAA,EAAA,KAAc,KAAK,EAEzB,EAAA,EAAA,SAAQ,EAAA,qBAAsB,CAC5B,MAAA,EAAA,EAAA,OAAY,EAAO,OAAO,CAC3B,CAAC,CAEF,IAAM,GAAA,EAAA,EAAA,cAA2B,EAAM,OAAS,UAAU,CACpD,GAAA,EAAA,EAAA,cAA6B,EAAU,MAAQ,KAAO,KAAK,CAE3D,GAAA,EAAA,EAAA,cAAsB,EAAM,SAAW,OAAS,OAAS,IAAA,GAAU,CACnE,GAAA,EAAA,EAAA,cAA8B,EAAU,MAAQ,EAAM,MAAQ,IAAA,GAAU,CACxE,GAAA,EAAA,EAAA,cAAiC,EAAU,OAAS,EAAM,SAAW,GAAO,IAAA,GAAU,CAEtF,GAAA,EAAA,EAAA,cAAiC,CACrC,cACA,EAAM,IAAM,oBAAoB,EAAM,MAAQ,KAC9C,CACE,uBAAwB,EAAU,MACnC,CACD,EAAM,OAAS,uBAAuB,EAAM,SAAW,KACvD,EAAM,WAAa,4BAA4B,EAAM,aAAe,KACrE,CAAC,CAGI,EAAO,GAAW,QAAQ,KAAK,gBAAgB,IAAU,CAE/D,SAAS,GAA4B,CAC/B,EAAU,QAEV,EAAM,QAAU,IAAA,IAClB,EAAK,mDAAmD,CAGtD,EAAM,UACR,EAAK,sDAAsD,EAI/D,SAAS,GAAwB,CAC3B,CAAC,EAAM,QAAU,EAAM,SAAW,SAElC,EAAM,OAAS,WAAa,EAAA,+BAA+B,SAAS,EAAM,OAAO,EACnF,EAAK,eAAe,EAAM,OAAO,gDAAgD,CAG/E,EAAM,OAAS,aAAe,EAAA,6BAA6B,SAAS,EAAM,OAAO,EACnF,EAAK,eAAe,EAAM,OAAO,8CAA8C,EAInF,SAAS,GAAoB,CAC3B,IAAM,EAAc,EAAQ,OAAO,KAAO,EAAQ,MAC7C,KAEL,KAAK,IAAM,KAAS,EAAY,SAC1B,KAAM,UAAY,KAEtB,GAAK,uEAAuE,CAC5E,eAIJ,EAAA,EAAA,eAAgB,CACd,QAAA,IAAA,WAA6B,eAC3B,GAA0B,CAC1B,GAAsB,CACtB,GAAkB,GAEpB,2EArKO,EAAA,MAAW,CAAA,SACZ,UAAJ,IAAI,EACJ,UAAQ,eACP,OAAA,EAAA,EAAA,gBAAO,EAAA,MAAe,CACtB,KAAM,EAAA,MACN,MAAO,EAAA,MACP,SAAU,EAAA,kCAGH,EAAA,EAAA,EAAA,YAAA,EAAA,OAAA,UAAA,CAAA,CAAA"}

package/dist/TextListItem-DIlrCkaM.cjs

@@ -0,0 +1,2 @@
+require(`./chunk-Bmb41Sf3.cjs`);const e=require(`./common/utils/index.cjs`),t=require(`./lib/text-list/text-list-constants.cjs`),n=require(`./lib/text-list/validators.cjs`);let r=require(`vue`);var i=[`value`],a=(0,r.defineComponent)({name:`DtTextListItem`,__name:`TextListItem`,props:{value:{type:Number,default:void 0},markerTone:{type:String,default:void 0,validator:n.textListMarkerToneValidator},markerClass:{type:[String,Array,Object],default:``},contentClass:{type:[String,Array,Object],default:``}},setup(n){let a=n,o=(0,r.useSlots)(),s=(0,r.inject)(t.DT_TEXT_LIST_CONTEXT,null),c=(0,r.computed)(()=>s?(0,r.unref)(s.type):void 0),l=(0,r.computed)(()=>e.hasSlotContent(o.marker)),u=(0,r.computed)(()=>c.value===`ordered`?a.value:void 0),d=(0,r.computed)(()=>[`d-text-list__item`,{"d-text-list__item--custom-marker":l.value},a.markerTone?`d-text-list__item--marker-tone-${a.markerTone}`:null]),f=e=>console.warn(`[DtTextListItem] ${e}`);return(0,r.onMounted)(()=>{process.env.NODE_ENV!==`production`&&(s||f(`DtTextListItem must be used inside DtTextList.`),a.value!==void 0&&c.value!==`ordered`&&f(`The value prop only applies inside a DtTextList with type="ordered".`))}),(e,t)=>((0,r.openBlock)(),(0,r.createElementBlock)(`li`,{"data-qa":`dt-text-list-item`,class:(0,r.normalizeClass)(d.value),value:u.value},[l.value?((0,r.openBlock)(),(0,r.createElementBlock)(`span`,{key:0,"data-qa":`dt-text-list-item-marker`,class:(0,r.normalizeClass)([`d-text-list__item-marker`,n.markerClass]),"aria-hidden":`true`},[(0,r.renderSlot)(e.$slots,`marker`)],2)):(0,r.createCommentVNode)(``,!0),(0,r.createElementVNode)(`div`,{"data-qa":`dt-text-list-item-content`,class:(0,r.normalizeClass)([`d-text-list__item-content`,n.contentClass])},[(0,r.renderSlot)(e.$slots,`default`)],2)],10,i))}});Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return a}});
+//# sourceMappingURL=TextListItem-DIlrCkaM.cjs.map

package/dist/TextListItem-DIlrCkaM.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextListItem-DIlrCkaM.cjs","names":[],"sources":["../components/TextList/TextListItem.vue","../components/TextList/TextListItem.vue"],"sourcesContent":["<!-- eslint-disable vue/no-restricted-class -->\n<template>\n  <li\n    data-qa=\"dt-text-list-item\"\n    :class=\"textListItemClasses\"\n    :value=\"orderedValue\"\n  >\n    <span\n      v-if=\"hasCustomMarker\"\n      data-qa=\"dt-text-list-item-marker\"\n      class=\"d-text-list__item-marker\"\n      :class=\"markerClass\"\n      aria-hidden=\"true\"\n    >\n      <!-- @slot Custom marker content. Decorative by default. -->\n      <slot name=\"marker\" />\n    </span>\n    <div\n      data-qa=\"dt-text-list-item-content\"\n      :class=\"['d-text-list__item-content', contentClass]\"\n    >\n      <!-- @slot Text list item content. -->\n      <slot />\n    </div>\n  </li>\n</template>\n\n<script setup lang=\"ts\">\n// @ts-nocheck\nimport {\n  computed,\n  inject,\n  onMounted,\n  unref,\n  useSlots,\n} from 'vue';\nimport { hasSlotContent } from '@/common/utils';\nimport { DT_TEXT_LIST_CONTEXT } from './TextListConstants';\nimport { textListMarkerToneValidator } from './Validators';\n\ndefineOptions({\n  name: 'DtTextListItem',\n});\n\nconst props = defineProps({\n  /**\n   * Native `li` value for ordered lists.\n   */\n  value: {\n    type: Number,\n    default: undefined,\n  },\n\n  /**\n   * Marker foreground tone for this item. Overrides the parent DtTextList markerTone.\n   * @values primary, secondary, tertiary, muted, disabled, placeholder, critical, critical-strong, positive, positive-strong, warning, info, info-strong, neutral-black, neutral-white\n   */\n  markerTone: {\n    type: String,\n    default: undefined,\n    validator: textListMarkerToneValidator,\n  },\n\n  /**\n   * Additional class name for the marker wrapper.\n   */\n  markerClass: {\n    type: [String, Array, Object],\n    default: '',\n  },\n\n  /**\n   * Additional class name for the content wrapper.\n   */\n  contentClass: {\n    type: [String, Array, Object],\n    default: '',\n  },\n});\n\nconst slots = useSlots();\nconst parentContext = inject(DT_TEXT_LIST_CONTEXT, null);\nconst parentType = computed(() => parentContext ? unref(parentContext.type) : undefined);\nconst hasCustomMarker = computed(() => hasSlotContent(slots.marker));\nconst orderedValue = computed(() => parentType.value === 'ordered' ? props.value : undefined);\nconst textListItemClasses = computed(() => [\n  'd-text-list__item',\n  { 'd-text-list__item--custom-marker': hasCustomMarker.value },\n  props.markerTone ? `d-text-list__item--marker-tone-${props.markerTone}` : null,\n]);\n\n// eslint-disable-next-line no-console\nconst warn = message => console.warn(`[DtTextListItem] ${message}`);\n\nonMounted(() => {\n  if (process.env.NODE_ENV !== 'production') {\n    if (!parentContext) {\n      warn('DtTextListItem must be used inside DtTextList.');\n    }\n\n    if (props.value !== undefined && parentType.value !== 'ordered') {\n      warn('The value prop only applies inside a DtTextList with type=\"ordered\".');\n    }\n  }\n});\n</script>\n","<!-- eslint-disable vue/no-restricted-class -->\n<template>\n  <li\n    data-qa=\"dt-text-list-item\"\n    :class=\"textListItemClasses\"\n    :value=\"orderedValue\"\n  >\n    <span\n      v-if=\"hasCustomMarker\"\n      data-qa=\"dt-text-list-item-marker\"\n      class=\"d-text-list__item-marker\"\n      :class=\"markerClass\"\n      aria-hidden=\"true\"\n    >\n      <!-- @slot Custom marker content. Decorative by default. -->\n      <slot name=\"marker\" />\n    </span>\n    <div\n      data-qa=\"dt-text-list-item-content\"\n      :class=\"['d-text-list__item-content', contentClass]\"\n    >\n      <!-- @slot Text list item content. -->\n      <slot />\n    </div>\n  </li>\n</template>\n\n<script setup lang=\"ts\">\n// @ts-nocheck\nimport {\n  computed,\n  inject,\n  onMounted,\n  unref,\n  useSlots,\n} from 'vue';\nimport { hasSlotContent } from '@/common/utils';\nimport { DT_TEXT_LIST_CONTEXT } from './TextListConstants';\nimport { textListMarkerToneValidator } from './Validators';\n\ndefineOptions({\n  name: 'DtTextListItem',\n});\n\nconst props = defineProps({\n  /**\n   * Native `li` value for ordered lists.\n   */\n  value: {\n    type: Number,\n    default: undefined,\n  },\n\n  /**\n   * Marker foreground tone for this item. Overrides the parent DtTextList markerTone.\n   * @values primary, secondary, tertiary, muted, disabled, placeholder, critical, critical-strong, positive, positive-strong, warning, info, info-strong, neutral-black, neutral-white\n   */\n  markerTone: {\n    type: String,\n    default: undefined,\n    validator: textListMarkerToneValidator,\n  },\n\n  /**\n   * Additional class name for the marker wrapper.\n   */\n  markerClass: {\n    type: [String, Array, Object],\n    default: '',\n  },\n\n  /**\n   * Additional class name for the content wrapper.\n   */\n  contentClass: {\n    type: [String, Array, Object],\n    default: '',\n  },\n});\n\nconst slots = useSlots();\nconst parentContext = inject(DT_TEXT_LIST_CONTEXT, null);\nconst parentType = computed(() => parentContext ? unref(parentContext.type) : undefined);\nconst hasCustomMarker = computed(() => hasSlotContent(slots.marker));\nconst orderedValue = computed(() => parentType.value === 'ordered' ? props.value : undefined);\nconst textListItemClasses = computed(() => [\n  'd-text-list__item',\n  { 'd-text-list__item--custom-marker': hasCustomMarker.value },\n  props.markerTone ? `d-text-list__item--marker-tone-${props.markerTone}` : null,\n]);\n\n// eslint-disable-next-line no-console\nconst warn = message => console.warn(`[DtTextListItem] ${message}`);\n\nonMounted(() => {\n  if (process.env.NODE_ENV !== 'production') {\n    if (!parentContext) {\n      warn('DtTextListItem must be used inside DtTextList.');\n    }\n\n    if (props.value !== undefined && parentType.value !== 'ordered') {\n      warn('The value prop only applies inside a DtTextList with type=\"ordered\".');\n    }\n  }\n});\n</script>\n"],"mappings":"ogBA4CA,IAAM,EAAQ,EAoCR,GAAA,EAAA,EAAA,WAAkB,CAClB,GAAA,EAAA,EAAA,QAAuB,EAAA,qBAAsB,KAAK,CAClD,GAAA,EAAA,EAAA,cAA4B,GAAA,EAAA,EAAA,OAAsB,EAAc,KAAK,CAAG,IAAA,GAAU,CAClF,GAAA,EAAA,EAAA,cAAiC,EAAA,eAAe,EAAM,OAAO,CAAC,CAC9D,GAAA,EAAA,EAAA,cAA8B,EAAW,QAAU,UAAY,EAAM,MAAQ,IAAA,GAAU,CACvF,GAAA,EAAA,EAAA,cAAqC,CACzC,oBACA,CAAE,mCAAoC,EAAgB,MAAO,CAC7D,EAAM,WAAa,kCAAkC,EAAM,aAAe,KAC3E,CAAC,CAGI,EAAO,GAAW,QAAQ,KAAK,oBAAoB,IAAU,QAEnE,EAAA,EAAA,eAAgB,CACd,QAAA,IAAA,WAA6B,eACtB,GACH,EAAK,iDAAiD,CAGpD,EAAM,QAAU,IAAA,IAAa,EAAW,QAAU,WACpD,EAAK,uEAAuE,GAGhF,oDAhFK,KAAA,CArBH,UAAQ,oBACP,OAAA,EAAA,EAAA,gBAAO,EAAA,MAAmB,CAC1B,MAAO,EAAA,QAGA,EAAA,QAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAQD,OAAA,OAPL,UAAQ,2BACR,OAAA,EAAA,EAAA,gBAAK,CAAC,2BACE,EAAA,YAAW,CAAA,CACnB,cAAY,0BAGU,EAAA,OAAA,SAAA,CAAA,CAAA,EAAA,GAAA,EAAA,EAAA,oBAAA,GAAA,GAAA,EAAA,EAAA,EAAA,oBAQlB,MAAA,CALJ,UAAQ,4BACP,OAAA,EAAA,EAAA,gBAAK,CAAA,4BAAgC,EAAA,aAAY,CAAA,oBAG1C,EAAA,OAAA,UAAA,CAAA,CAAA,EAAA,CAAA,CAAA,GAAA,EAAA"}

package/dist/TextListItem-ImUi_FWh.js

@@ -0,0 +1,62 @@
+import { hasSlotContent as e } from "./common/utils/index.js";
+import { DT_TEXT_LIST_CONTEXT as t } from "./lib/text-list/text-list-constants.js";
+import { textListMarkerToneValidator as n } from "./lib/text-list/validators.js";
+import { computed as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, defineComponent as s, inject as c, normalizeClass as l, onMounted as u, openBlock as d, renderSlot as f, unref as p, useSlots as m } from "vue";
+//#region components/TextList/TextListItem.vue?vue&type=script&setup=true&lang.ts
+var h = ["value"], g = /* @__PURE__ */ s({
+	name: "DtTextListItem",
+	__name: "TextListItem",
+	props: {
+		value: {
+			type: Number,
+			default: void 0
+		},
+		markerTone: {
+			type: String,
+			default: void 0,
+			validator: n
+		},
+		markerClass: {
+			type: [
+				String,
+				Array,
+				Object
+			],
+			default: ""
+		},
+		contentClass: {
+			type: [
+				String,
+				Array,
+				Object
+			],
+			default: ""
+		}
+	},
+	setup(n) {
+		let s = n, g = m(), _ = c(t, null), v = r(() => _ ? p(_.type) : void 0), y = r(() => e(g.marker)), b = r(() => v.value === "ordered" ? s.value : void 0), x = r(() => [
+			"d-text-list__item",
+			{ "d-text-list__item--custom-marker": y.value },
+			s.markerTone ? `d-text-list__item--marker-tone-${s.markerTone}` : null
+		]), S = (e) => console.warn(`[DtTextListItem] ${e}`);
+		return u(() => {
+			process.env.NODE_ENV !== "production" && (_ || S("DtTextListItem must be used inside DtTextList."), s.value !== void 0 && v.value !== "ordered" && S("The value prop only applies inside a DtTextList with type=\"ordered\"."));
+		}), (e, t) => (d(), a("li", {
+			"data-qa": "dt-text-list-item",
+			class: l(x.value),
+			value: b.value
+		}, [y.value ? (d(), a("span", {
+			key: 0,
+			"data-qa": "dt-text-list-item-marker",
+			class: l(["d-text-list__item-marker", n.markerClass]),
+			"aria-hidden": "true"
+		}, [f(e.$slots, "marker")], 2)) : i("", !0), o("div", {
+			"data-qa": "dt-text-list-item-content",
+			class: l(["d-text-list__item-content", n.contentClass])
+		}, [f(e.$slots, "default")], 2)], 10, h));
+	}
+});
+//#endregion
+export { g as t };
+
+//# sourceMappingURL=TextListItem-ImUi_FWh.js.map

package/dist/TextListItem-ImUi_FWh.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextListItem-ImUi_FWh.js","names":[],"sources":["../components/TextList/TextListItem.vue","../components/TextList/TextListItem.vue"],"sourcesContent":["<!-- eslint-disable vue/no-restricted-class -->\n<template>\n  <li\n    data-qa=\"dt-text-list-item\"\n    :class=\"textListItemClasses\"\n    :value=\"orderedValue\"\n  >\n    <span\n      v-if=\"hasCustomMarker\"\n      data-qa=\"dt-text-list-item-marker\"\n      class=\"d-text-list__item-marker\"\n      :class=\"markerClass\"\n      aria-hidden=\"true\"\n    >\n      <!-- @slot Custom marker content. Decorative by default. -->\n      <slot name=\"marker\" />\n    </span>\n    <div\n      data-qa=\"dt-text-list-item-content\"\n      :class=\"['d-text-list__item-content', contentClass]\"\n    >\n      <!-- @slot Text list item content. -->\n      <slot />\n    </div>\n  </li>\n</template>\n\n<script setup lang=\"ts\">\n// @ts-nocheck\nimport {\n  computed,\n  inject,\n  onMounted,\n  unref,\n  useSlots,\n} from 'vue';\nimport { hasSlotContent } from '@/common/utils';\nimport { DT_TEXT_LIST_CONTEXT } from './TextListConstants';\nimport { textListMarkerToneValidator } from './Validators';\n\ndefineOptions({\n  name: 'DtTextListItem',\n});\n\nconst props = defineProps({\n  /**\n   * Native `li` value for ordered lists.\n   */\n  value: {\n    type: Number,\n    default: undefined,\n  },\n\n  /**\n   * Marker foreground tone for this item. Overrides the parent DtTextList markerTone.\n   * @values primary, secondary, tertiary, muted, disabled, placeholder, critical, critical-strong, positive, positive-strong, warning, info, info-strong, neutral-black, neutral-white\n   */\n  markerTone: {\n    type: String,\n    default: undefined,\n    validator: textListMarkerToneValidator,\n  },\n\n  /**\n   * Additional class name for the marker wrapper.\n   */\n  markerClass: {\n    type: [String, Array, Object],\n    default: '',\n  },\n\n  /**\n   * Additional class name for the content wrapper.\n   */\n  contentClass: {\n    type: [String, Array, Object],\n    default: '',\n  },\n});\n\nconst slots = useSlots();\nconst parentContext = inject(DT_TEXT_LIST_CONTEXT, null);\nconst parentType = computed(() => parentContext ? unref(parentContext.type) : undefined);\nconst hasCustomMarker = computed(() => hasSlotContent(slots.marker));\nconst orderedValue = computed(() => parentType.value === 'ordered' ? props.value : undefined);\nconst textListItemClasses = computed(() => [\n  'd-text-list__item',\n  { 'd-text-list__item--custom-marker': hasCustomMarker.value },\n  props.markerTone ? `d-text-list__item--marker-tone-${props.markerTone}` : null,\n]);\n\n// eslint-disable-next-line no-console\nconst warn = message => console.warn(`[DtTextListItem] ${message}`);\n\nonMounted(() => {\n  if (process.env.NODE_ENV !== 'production') {\n    if (!parentContext) {\n      warn('DtTextListItem must be used inside DtTextList.');\n    }\n\n    if (props.value !== undefined && parentType.value !== 'ordered') {\n      warn('The value prop only applies inside a DtTextList with type=\"ordered\".');\n    }\n  }\n});\n</script>\n","<!-- eslint-disable vue/no-restricted-class -->\n<template>\n  <li\n    data-qa=\"dt-text-list-item\"\n    :class=\"textListItemClasses\"\n    :value=\"orderedValue\"\n  >\n    <span\n      v-if=\"hasCustomMarker\"\n      data-qa=\"dt-text-list-item-marker\"\n      class=\"d-text-list__item-marker\"\n      :class=\"markerClass\"\n      aria-hidden=\"true\"\n    >\n      <!-- @slot Custom marker content. Decorative by default. -->\n      <slot name=\"marker\" />\n    </span>\n    <div\n      data-qa=\"dt-text-list-item-content\"\n      :class=\"['d-text-list__item-content', contentClass]\"\n    >\n      <!-- @slot Text list item content. -->\n      <slot />\n    </div>\n  </li>\n</template>\n\n<script setup lang=\"ts\">\n// @ts-nocheck\nimport {\n  computed,\n  inject,\n  onMounted,\n  unref,\n  useSlots,\n} from 'vue';\nimport { hasSlotContent } from '@/common/utils';\nimport { DT_TEXT_LIST_CONTEXT } from './TextListConstants';\nimport { textListMarkerToneValidator } from './Validators';\n\ndefineOptions({\n  name: 'DtTextListItem',\n});\n\nconst props = defineProps({\n  /**\n   * Native `li` value for ordered lists.\n   */\n  value: {\n    type: Number,\n    default: undefined,\n  },\n\n  /**\n   * Marker foreground tone for this item. Overrides the parent DtTextList markerTone.\n   * @values primary, secondary, tertiary, muted, disabled, placeholder, critical, critical-strong, positive, positive-strong, warning, info, info-strong, neutral-black, neutral-white\n   */\n  markerTone: {\n    type: String,\n    default: undefined,\n    validator: textListMarkerToneValidator,\n  },\n\n  /**\n   * Additional class name for the marker wrapper.\n   */\n  markerClass: {\n    type: [String, Array, Object],\n    default: '',\n  },\n\n  /**\n   * Additional class name for the content wrapper.\n   */\n  contentClass: {\n    type: [String, Array, Object],\n    default: '',\n  },\n});\n\nconst slots = useSlots();\nconst parentContext = inject(DT_TEXT_LIST_CONTEXT, null);\nconst parentType = computed(() => parentContext ? unref(parentContext.type) : undefined);\nconst hasCustomMarker = computed(() => hasSlotContent(slots.marker));\nconst orderedValue = computed(() => parentType.value === 'ordered' ? props.value : undefined);\nconst textListItemClasses = computed(() => [\n  'd-text-list__item',\n  { 'd-text-list__item--custom-marker': hasCustomMarker.value },\n  props.markerTone ? `d-text-list__item--marker-tone-${props.markerTone}` : null,\n]);\n\n// eslint-disable-next-line no-console\nconst warn = message => console.warn(`[DtTextListItem] ${message}`);\n\nonMounted(() => {\n  if (process.env.NODE_ENV !== 'production') {\n    if (!parentContext) {\n      warn('DtTextListItem must be used inside DtTextList.');\n    }\n\n    if (props.value !== undefined && parentType.value !== 'ordered') {\n      warn('The value prop only applies inside a DtTextList with type=\"ordered\".');\n    }\n  }\n});\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4CA,IAAM,IAAQ,GAoCR,IAAQ,GAAU,EAClB,IAAgB,EAAO,GAAsB,KAAK,EAClD,IAAa,QAAe,IAAgB,EAAM,EAAc,KAAK,GAAG,KAAA,EAAU,EAClF,IAAkB,QAAe,EAAe,EAAM,OAAO,CAAC,EAC9D,IAAe,QAAe,EAAW,UAAU,YAAY,EAAM,QAAQ,KAAA,EAAU,EACvF,IAAsB,QAAe;GACzC;GACA,EAAE,oCAAoC,EAAgB,OAAO;GAC7D,EAAM,aAAa,kCAAkC,EAAM,eAAe;GAC3E,CAAC,EAGI,KAAO,MAAW,QAAQ,KAAK,oBAAoB,IAAU;SAEnE,QAAgB;AACd,GAAA,QAAA,IAAA,aAA6B,iBACtB,KACH,EAAK,iDAAiD,EAGpD,EAAM,UAAU,KAAA,KAAa,EAAW,UAAU,aACpD,EAAK,yEAAuE;IAGhF,kBAtGA,EAsBK,MAAA;GArBH,WAAQ;GACP,OAAK,EAAE,EAAA,MAAmB;GAC1B,OAAO,EAAA;MAGA,EAAA,SAAA,GAAA,EADR,EASO,QAAA;;GAPL,WAAQ;GACR,OAAK,EAAA,CAAC,4BACE,EAAA,YAAW,CAAA;GACnB,eAAY;MAGZ,EAAsB,EAAA,QAAA,SAAA,CAAA,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA,EAExB,EAMM,OAAA;GALJ,WAAQ;GACP,OAAK,EAAA,CAAA,6BAAgC,EAAA,aAAY,CAAA;MAGlD,EAAQ,EAAA,QAAA,UAAA,CAAA,EAAA,EAAA,CAAA,EAAA,IAAA,EAAA"}