vuetify 3.5.8 → 3.5.10

package/lib/labs/VTreeview/VTreeviewGroup.mjs

@@ -0,0 +1,48 @@
+import { mergeProps as _mergeProps, createVNode as _createVNode, Fragment as _Fragment } from "vue";
+// Components
+import { VDefaultsProvider } from "../../components/VDefaultsProvider/index.mjs";
+import { makeVListGroupProps, VListGroup } from "../../components/VList/VListGroup.mjs"; // Utilities
+import { computed, ref } from 'vue';
+import { genericComponent, omit, propsFactory, useRender } from "../../util/index.mjs"; // Types
+export const makeVTreeviewGroupProps = propsFactory({
+  ...omit(makeVListGroupProps({
+    collapseIcon: '$treeviewCollapse',
+    expandIcon: '$treeviewExpand'
+  }), ['subgroup'])
+}, 'VTreeviewGroup');
+export const VTreeviewGroup = genericComponent()({
+  name: 'VTreeviewGroup',
+  props: makeVTreeviewGroupProps(),
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
+    const vListGroupRef = ref();
+    const toggleIcon = computed(() => vListGroupRef.value?.isOpen ? props.collapseIcon : props.expandIcon);
+    const activatorDefaults = computed(() => ({
+      VTreeviewItem: {
+        prependIcon: undefined,
+        appendIcon: undefined,
+        active: vListGroupRef.value?.isOpen,
+        toggleIcon: toggleIcon.value
+      }
+    }));
+    useRender(() => {
+      const listGroupProps = VListGroup.filterProps(props);
+      return _createVNode(VListGroup, _mergeProps(listGroupProps, {
+        "ref": vListGroupRef,
+        "class": ['v-treeview-group', props.class],
+        "subgroup": true
+      }), {
+        ...slots,
+        activator: slots.activator ? slotProps => _createVNode(_Fragment, null, [_createVNode(VDefaultsProvider, {
+          "defaults": activatorDefaults.value
+        }, {
+          default: () => [slots.activator?.(slotProps)]
+        })]) : undefined
+      });
+    });
+    return {};
+  }
+});
+//# sourceMappingURL=VTreeviewGroup.mjs.map

package/lib/labs/VTreeview/VTreeviewGroup.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"VTreeviewGroup.mjs","names":["VDefaultsProvider","makeVListGroupProps","VListGroup","computed","ref","genericComponent","omit","propsFactory","useRender","makeVTreeviewGroupProps","collapseIcon","expandIcon","VTreeviewGroup","name","props","setup","_ref","slots","vListGroupRef","toggleIcon","value","isOpen","activatorDefaults","VTreeviewItem","prependIcon","undefined","appendIcon","active","listGroupProps","filterProps","_createVNode","_mergeProps","class","activator","slotProps","_Fragment","default"],"sources":["../../../src/labs/VTreeview/VTreeviewGroup.tsx"],"sourcesContent":["// Components\nimport { VDefaultsProvider } from '@/components/VDefaultsProvider'\nimport { makeVListGroupProps, VListGroup } from '@/components/VList/VListGroup'\n\n// Utilities\nimport { computed, ref } from 'vue'\nimport { genericComponent, omit, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { VListGroupSlots } from '@/components/VList/VListGroup'\n\nexport const makeVTreeviewGroupProps = propsFactory({\n  ...omit(makeVListGroupProps({\n    collapseIcon: '$treeviewCollapse',\n    expandIcon: '$treeviewExpand',\n  }), ['subgroup']),\n}, 'VTreeviewGroup')\n\nexport const VTreeviewGroup = genericComponent<VListGroupSlots>()({\n  name: 'VTreeviewGroup',\n\n  props: makeVTreeviewGroupProps(),\n\n  setup (props, { slots }) {\n    const vListGroupRef = ref<VListGroup>()\n    const toggleIcon = computed(() => vListGroupRef.value?.isOpen ? props.collapseIcon : props.expandIcon)\n\n    const activatorDefaults = computed(() => ({\n      VTreeviewItem: {\n        prependIcon: undefined,\n        appendIcon: undefined,\n        active: vListGroupRef.value?.isOpen,\n        toggleIcon: toggleIcon.value,\n      },\n    }))\n\n    useRender(() => {\n      const listGroupProps = VListGroup.filterProps(props)\n\n      return (\n        <VListGroup\n          { ...listGroupProps }\n          ref={ vListGroupRef }\n          class={[\n            'v-treeview-group',\n            props.class,\n          ]}\n          subgroup\n        >\n          {{\n            ...slots,\n            activator: slots.activator ? slotProps => (\n              <>\n                <VDefaultsProvider defaults={ activatorDefaults.value }>\n                  { slots.activator?.(slotProps) }\n                </VDefaultsProvider>\n              </>\n            ) : undefined,\n          }}\n        </VListGroup>\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VTreeviewGroup = InstanceType<typeof VTreeviewGroup>\n"],"mappings":";AAAA;AAAA,SACSA,iBAAiB;AAAA,SACjBC,mBAAmB,EAAEC,UAAU,iDAExC;AACA,SAASC,QAAQ,EAAEC,GAAG,QAAQ,KAAK;AAAA,SAC1BC,gBAAgB,EAAEC,IAAI,EAAEC,YAAY,EAAEC,SAAS,gCAExD;AAGA,OAAO,MAAMC,uBAAuB,GAAGF,YAAY,CAAC;EAClD,GAAGD,IAAI,CAACL,mBAAmB,CAAC;IAC1BS,YAAY,EAAE,mBAAmB;IACjCC,UAAU,EAAE;EACd,CAAC,CAAC,EAAE,CAAC,UAAU,CAAC;AAClB,CAAC,EAAE,gBAAgB,CAAC;AAEpB,OAAO,MAAMC,cAAc,GAAGP,gBAAgB,CAAkB,CAAC,CAAC;EAChEQ,IAAI,EAAE,gBAAgB;EAEtBC,KAAK,EAAEL,uBAAuB,CAAC,CAAC;EAEhCM,KAAKA,CAAED,KAAK,EAAAE,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACrB,MAAME,aAAa,GAAGd,GAAG,CAAa,CAAC;IACvC,MAAMe,UAAU,GAAGhB,QAAQ,CAAC,MAAMe,aAAa,CAACE,KAAK,EAAEC,MAAM,GAAGP,KAAK,CAACJ,YAAY,GAAGI,KAAK,CAACH,UAAU,CAAC;IAEtG,MAAMW,iBAAiB,GAAGnB,QAAQ,CAAC,OAAO;MACxCoB,aAAa,EAAE;QACbC,WAAW,EAAEC,SAAS;QACtBC,UAAU,EAAED,SAAS;QACrBE,MAAM,EAAET,aAAa,CAACE,KAAK,EAAEC,MAAM;QACnCF,UAAU,EAAEA,UAAU,CAACC;MACzB;IACF,CAAC,CAAC,CAAC;IAEHZ,SAAS,CAAC,MAAM;MACd,MAAMoB,cAAc,GAAG1B,UAAU,CAAC2B,WAAW,CAACf,KAAK,CAAC;MAEpD,OAAAgB,YAAA,CAAA5B,UAAA,EAAA6B,WAAA,CAESH,cAAc;QAAA,OACbV,aAAa;QAAA,SACZ,CACL,kBAAkB,EAClBJ,KAAK,CAACkB,KAAK,CACZ;QAAA;MAAA;QAIC,GAAGf,KAAK;QACRgB,SAAS,EAAEhB,KAAK,CAACgB,SAAS,GAAGC,SAAS,IAAAJ,YAAA,CAAAK,SAAA,SAAAL,YAAA,CAAA9B,iBAAA;UAAA,YAEJsB,iBAAiB,CAACF;QAAK;UAAAgB,OAAA,EAAAA,CAAA,MACjDnB,KAAK,CAACgB,SAAS,GAAGC,SAAS,CAAC;QAAA,IAGnC,GAAGT;MAAS;IAIrB,CAAC,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC"}

package/lib/labs/VTreeview/VTreeviewItem.css

@@ -0,0 +1,17 @@
+.v-treeview-item--filtered {
+  display: none;
+}
+
+.v-treeview {
+  --indent-padding: 0px;
+}
+
+.v-treeview-group.v-list-group {
+  --list-indent-size: 16px;
+}
+.v-list--slim .v-treeview-group.v-list-group {
+  --prepend-width: 16px;
+}
+.v-treeview-group.v-list-group .v-list-group__items .v-list-item {
+  padding-inline-start: calc(12px + var(--indent-padding)) !important;
+}

package/lib/labs/VTreeview/VTreeviewItem.mjs

@@ -0,0 +1,86 @@
+import { mergeProps as _mergeProps, createVNode as _createVNode, Fragment as _Fragment } from "vue";
+// Styles
+import "./VTreeviewItem.css";
+
+// Components
+import { VBtn } from "../../components/VBtn/index.mjs";
+import { VListItemAction } from "../../components/VList/index.mjs";
+import { makeVListItemProps, VListItem } from "../../components/VList/VListItem.mjs"; // Composables
+import { IconValue } from "../../composables/icons.mjs";
+import { useLink } from "../../composables/router.mjs"; // Utilities
+import { computed, inject, ref } from 'vue';
+import { genericComponent, propsFactory, useRender } from "../../util/index.mjs"; // Types
+import { VTreeviewSymbol } from "./shared.mjs";
+import { VProgressCircular } from "../allComponents.mjs";
+export const makeVTreeviewItemProps = propsFactory({
+  loading: Boolean,
+  toggleIcon: IconValue,
+  ...makeVListItemProps({
+    slim: true
+  })
+}, 'VTreeviewItem');
+export const VTreeviewItem = genericComponent()({
+  name: 'VTreeviewItem',
+  props: makeVTreeviewItemProps(),
+  setup(props, _ref) {
+    let {
+      attrs,
+      slots,
+      emit
+    } = _ref;
+    const link = useLink(props, attrs);
+    const id = computed(() => props.value === undefined ? link.href.value : props.value);
+    const vListItemRef = ref();
+    const isClickable = computed(() => !props.disabled && props.link !== false && (props.link || link.isClickable.value || props.value != null && !!vListItemRef.value?.list));
+    function onClick(e) {
+      if (!vListItemRef.value?.isGroupActivator || !isClickable.value) return;
+      props.value != null && vListItemRef.value?.select(!vListItemRef.value?.isSelected, e);
+    }
+    function onKeyDown(e) {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        onClick(e);
+      }
+    }
+    const visibleIds = inject(VTreeviewSymbol, {
+      visibleIds: ref()
+    }).visibleIds;
+    useRender(() => {
+      const listItemProps = VListItem.filterProps(props);
+      const hasPrepend = slots.prepend || props.toggleIcon;
+      return _createVNode(VListItem, _mergeProps({
+        "ref": vListItemRef
+      }, listItemProps, {
+        "class": ['v-treeview-item', {
+          'v-treeview-item--filtered': visibleIds.value && !visibleIds.value.has(id.value)
+        }, props.class],
+        "onClick": onClick,
+        "onKeydown": isClickable.value && onKeyDown
+      }), {
+        ...slots,
+        prepend: hasPrepend ? slotProps => {
+          return _createVNode(_Fragment, null, [props.toggleIcon && _createVNode(VListItemAction, {
+            "start": false
+          }, {
+            default: () => [_createVNode(VBtn, {
+              "density": "compact",
+              "icon": props.toggleIcon,
+              "loading": props.loading,
+              "variant": "text"
+            }, {
+              loader() {
+                return _createVNode(VProgressCircular, {
+                  "indeterminate": "disable-shrink",
+                  "size": "20",
+                  "width": "2"
+                }, null);
+              }
+            })]
+          }), slots.prepend?.(slotProps)]);
+        } : undefined
+      });
+    });
+    return {};
+  }
+});
+//# sourceMappingURL=VTreeviewItem.mjs.map

package/lib/labs/VTreeview/VTreeviewItem.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"VTreeviewItem.mjs","names":["VBtn","VListItemAction","makeVListItemProps","VListItem","IconValue","useLink","computed","inject","ref","genericComponent","propsFactory","useRender","VTreeviewSymbol","VProgressCircular","makeVTreeviewItemProps","loading","Boolean","toggleIcon","slim","VTreeviewItem","name","props","setup","_ref","attrs","slots","emit","link","id","value","undefined","href","vListItemRef","isClickable","disabled","list","onClick","e","isGroupActivator","select","isSelected","onKeyDown","key","preventDefault","visibleIds","listItemProps","filterProps","hasPrepend","prepend","_createVNode","_mergeProps","has","class","slotProps","_Fragment","default","loader"],"sources":["../../../src/labs/VTreeview/VTreeviewItem.tsx"],"sourcesContent":["// Styles\nimport './VTreeviewItem.sass'\n\n// Components\nimport { VBtn } from '@/components/VBtn'\nimport { VListItemAction } from '@/components/VList'\nimport { makeVListItemProps, VListItem } from '@/components/VList/VListItem'\n\n// Composables\nimport { IconValue } from '@/composables/icons'\nimport { useLink } from '@/composables/router'\n\n// Utilities\nimport { computed, inject, ref } from 'vue'\nimport { genericComponent, propsFactory, useRender } from '@/util'\n\n// Types\nimport { VTreeviewSymbol } from './shared'\nimport { VProgressCircular } from '../allComponents'\nimport type { VListItemSlots } from '@/components/VList/VListItem'\n\nexport const makeVTreeviewItemProps = propsFactory({\n  loading: Boolean,\n  toggleIcon: IconValue,\n\n  ...makeVListItemProps({ slim: true }),\n}, 'VTreeviewItem')\n\nexport const VTreeviewItem = genericComponent<VListItemSlots>()({\n  name: 'VTreeviewItem',\n\n  props: makeVTreeviewItemProps(),\n\n  setup (props, { attrs, slots, emit }) {\n    const link = useLink(props, attrs)\n    const id = computed(() => props.value === undefined ? link.href.value : props.value)\n    const vListItemRef = ref<VListItem>()\n\n    const isClickable = computed(() =>\n      !props.disabled &&\n      props.link !== false &&\n      (props.link || link.isClickable.value || (props.value != null && !!vListItemRef.value?.list))\n    )\n\n    function onClick (e: MouseEvent | KeyboardEvent) {\n      if (!vListItemRef.value?.isGroupActivator || !isClickable.value) return\n      props.value != null && vListItemRef.value?.select(!vListItemRef.value?.isSelected, e)\n    }\n\n    function onKeyDown (e: KeyboardEvent) {\n      if (e.key === 'Enter' || e.key === ' ') {\n        e.preventDefault()\n        onClick(e as any as MouseEvent)\n      }\n    }\n\n    const visibleIds = inject(VTreeviewSymbol, { visibleIds: ref() }).visibleIds\n\n    useRender(() => {\n      const listItemProps = VListItem.filterProps(props)\n      const hasPrepend = slots.prepend || props.toggleIcon\n\n      return (\n        <VListItem\n          ref={ vListItemRef }\n          { ...listItemProps }\n          class={[\n            'v-treeview-item',\n            {\n              'v-treeview-item--filtered': visibleIds.value && !visibleIds.value.has(id.value),\n            },\n            props.class,\n          ]}\n          onClick={ onClick }\n          onKeydown={ isClickable.value && onKeyDown }\n        >\n          {{\n            ...slots,\n            prepend: hasPrepend ? slotProps => {\n              return (\n                <>\n                  { props.toggleIcon && (\n                    <VListItemAction start={ false }>\n                      <VBtn\n                        density=\"compact\"\n                        icon={ props.toggleIcon }\n                        loading={ props.loading }\n                        variant=\"text\"\n                      >\n                        {{\n                          loader () {\n                            return (\n                              <VProgressCircular\n                                indeterminate=\"disable-shrink\"\n                                size=\"20\"\n                                width=\"2\"\n                              />\n                            )\n                          },\n                        }}\n                      </VBtn>\n                    </VListItemAction>\n                  )}\n\n                  { slots.prepend?.(slotProps) }\n                </>\n              )\n            } : undefined,\n          }}\n        </VListItem>\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VTreeviewItem = InstanceType<typeof VTreeviewItem>\n"],"mappings":"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"}

package/lib/labs/VTreeview/VTreeviewItem.sass

@@ -0,0 +1,19 @@
+@use './variables' as *
+
+.v-treeview-item--filtered
+    display: none
+
+.v-treeview
+  --indent-padding: 0px
+
+.v-treeview-group.v-list-group
+  --list-indent-size: #{$treeview-group-list-indent-size}
+
+  .v-list--slim &
+    --prepend-width: #{$treeview-group-list-prepend-width}
+
+  .v-list-group__items .v-list-item
+    padding-inline-start: calc(#{$treeview-item-padding-inline-start} + var(--indent-padding)) !important
+
+  .v-list-group__items .v-list-item--prepend
+    // padding-inline-start: calc(#{$treeview-item-prepend-padding-inline-start} + var(--indent-padding)) !important