@treeui/vue 0.15.0 → 0.17.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/TAccordion.cjs.map +1 -1
- package/dist/components/TAccordion.js.map +1 -1
- package/dist/components/TAccordion.vue_vue_type_script_setup_true_lang.cjs +1 -1
- package/dist/components/TAccordion.vue_vue_type_script_setup_true_lang.cjs.map +1 -1
- package/dist/components/TAccordion.vue_vue_type_script_setup_true_lang.js +3 -3
- package/dist/components/TAccordion.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/TAccordionItem.cjs.map +1 -1
- package/dist/components/TAccordionItem.js.map +1 -1
- package/dist/components/TAccordionItem.vue_vue_type_script_setup_true_lang.cjs +1 -1
- package/dist/components/TAccordionItem.vue_vue_type_script_setup_true_lang.cjs.map +1 -1
- package/dist/components/TAccordionItem.vue_vue_type_script_setup_true_lang.js +1 -1
- package/dist/components/TAccordionItem.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/TCard.cjs.map +1 -1
- package/dist/components/TCard.js.map +1 -1
- package/dist/components/TCard.vue_vue_type_script_setup_true_lang.cjs +1 -1
- package/dist/components/TCard.vue_vue_type_script_setup_true_lang.cjs.map +1 -1
- package/dist/components/TCard.vue_vue_type_script_setup_true_lang.js +2 -2
- package/dist/components/TCard.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/TDropdown.cjs.map +1 -1
- package/dist/components/TDropdown.js.map +1 -1
- package/dist/components/TDropdown.vue.d.ts +6 -2
- package/dist/components/TDropdown.vue.d.ts.map +1 -1
- package/dist/components/TDropdown.vue_vue_type_script_setup_true_lang.cjs +1 -1
- package/dist/components/TDropdown.vue_vue_type_script_setup_true_lang.cjs.map +1 -1
- package/dist/components/TDropdown.vue_vue_type_script_setup_true_lang.js +31 -24
- package/dist/components/TDropdown.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/TFlag.cjs +2 -0
- package/dist/components/TFlag.cjs.map +1 -0
- package/dist/components/TFlag.js +7 -0
- package/dist/components/TFlag.js.map +1 -0
- package/dist/components/TFlag.vue.d.ts +20 -0
- package/dist/components/TFlag.vue.d.ts.map +1 -0
- package/dist/components/TFlag.vue_vue_type_script_setup_true_lang.cjs +2 -0
- package/dist/components/TFlag.vue_vue_type_script_setup_true_lang.cjs.map +1 -0
- package/dist/components/TFlag.vue_vue_type_script_setup_true_lang.js +58 -0
- package/dist/components/TFlag.vue_vue_type_script_setup_true_lang.js.map +1 -0
- package/dist/components/TIcon.vue.d.ts +1 -1
- package/dist/components/TLanguageSelect.cjs +2 -0
- package/dist/components/TLanguageSelect.cjs.map +1 -0
- package/dist/components/TLanguageSelect.js +7 -0
- package/dist/components/TLanguageSelect.js.map +1 -0
- package/dist/components/TLanguageSelect.vue.d.ts +103 -0
- package/dist/components/TLanguageSelect.vue.d.ts.map +1 -0
- package/dist/components/TLanguageSelect.vue_vue_type_script_setup_true_lang.cjs +2 -0
- package/dist/components/TLanguageSelect.vue_vue_type_script_setup_true_lang.cjs.map +1 -0
- package/dist/components/TLanguageSelect.vue_vue_type_script_setup_true_lang.js +299 -0
- package/dist/components/TLanguageSelect.vue_vue_type_script_setup_true_lang.js.map +1 -0
- package/dist/components/TMarkdownEditor.cjs.map +1 -1
- package/dist/components/TMarkdownEditor.js.map +1 -1
- package/dist/components/TMarkdownEditor.vue.d.ts +2 -0
- package/dist/components/TMarkdownEditor.vue.d.ts.map +1 -1
- package/dist/components/TMarkdownEditor.vue_vue_type_script_setup_true_lang.cjs +9 -9
- package/dist/components/TMarkdownEditor.vue_vue_type_script_setup_true_lang.cjs.map +1 -1
- package/dist/components/TMarkdownEditor.vue_vue_type_script_setup_true_lang.js +117 -96
- package/dist/components/TMarkdownEditor.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/TPopover.cjs.map +1 -1
- package/dist/components/TPopover.js.map +1 -1
- package/dist/components/TPopover.vue.d.ts +4 -2
- package/dist/components/TPopover.vue.d.ts.map +1 -1
- package/dist/components/TPopover.vue_vue_type_script_setup_true_lang.cjs +1 -1
- package/dist/components/TPopover.vue_vue_type_script_setup_true_lang.cjs.map +1 -1
- package/dist/components/TPopover.vue_vue_type_script_setup_true_lang.js +10 -5
- package/dist/components/TPopover.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/accordion.cjs.map +1 -1
- package/dist/components/accordion.d.ts +4 -4
- package/dist/components/accordion.d.ts.map +1 -1
- package/dist/components/accordion.js.map +1 -1
- package/dist/components/index.d.ts +13 -1
- package/dist/components/index.d.ts.map +1 -1
- package/dist/index.cjs +1 -1
- package/dist/index.js +80 -78
- package/dist/plugin.cjs +1 -1
- package/dist/plugin.cjs.map +1 -1
- package/dist/plugin.d.ts.map +1 -1
- package/dist/plugin.js +146 -142
- package/dist/plugin.js.map +1 -1
- package/dist/style.css +1 -1
- package/package.json +2 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TAccordion.cjs","names":[],"sources":["../../src/components/TAccordion.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, provide, reactive } from 'vue';\nimport { type AccordionType, accordionInjectionKey } from './accordion';\n\nconst props = withDefaults(\n defineProps<{\n type?: AccordionType;\n modelValue?: string | string[];\n defaultValue?: string | string[];\n disabled?: boolean;\n collapsible?: boolean;\n }>(),\n {\n type: 'single',\n modelValue: undefined,\n defaultValue: undefined,\n disabled: false,\n collapsible: false,\n },\n);\n\nconst emit = defineEmits<{\n (e: 'update:modelValue', value: string | string[] | undefined): void;\n}>();\n\n// Internal uncontrolled state\nconst internalValue = computed<string[]>(() => {\n const def = props.defaultValue;\n if (def === undefined) return [];\n return Array.isArray(def) ? def : [def];\n});\n\nconst uncontrolledValue = reactive<Set<string>>(new Set(internalValue.value));\n\nconst isControlled = computed(() => props.modelValue !== undefined);\n\nconst openValues = computed<Set<string>>(() => {\n if (isControlled.value) {\n const mv = props.modelValue!;\n return new Set(Array.isArray(mv) ? mv : [mv]);\n }\n return uncontrolledValue;\n});\n\nfunction isItemOpen(value: string): boolean {\n return openValues.value.has(value);\n}\n\nfunction emitUpdate(values: Set<string>) {\n if (props.type === 'single') {\n const arr = [...values];\n emit('update:modelValue', arr.length > 0 ? arr[0] : undefined);\n } else {\n emit('update:modelValue', [...values]);\n }\n}\n\nfunction toggleItem(value: string) {\n const currentlyOpen = isItemOpen(value);\n\n if (props.type === 'single') {\n if (currentlyOpen) {\n if (props.collapsible) {\n if (!isControlled.value) {\n uncontrolledValue.delete(value);\n }\n emitUpdate(new Set());\n }\n } else {\n if (!isControlled.value) {\n uncontrolledValue.clear();\n uncontrolledValue.add(value);\n }\n emitUpdate(new Set([value]));\n }\n } else {\n // Multiple mode\n const next = new Set(openValues.value);\n if (currentlyOpen) {\n next.delete(value);\n } else {\n next.add(value);\n }\n if (!isControlled.value) {\n if (currentlyOpen) {\n uncontrolledValue.delete(value);\n } else {\n uncontrolledValue.add(value);\n }\n }\n emitUpdate(next);\n }\n}\n\n// Keyboard navigation between triggers\nconst triggerMap = new Map<string, HTMLElement>();\nconst triggerOrder: string[] = reactive([]);\n\nfunction registerTrigger(value: string, el: HTMLElement) {\n if (!triggerMap.has(value)) {\n triggerOrder.push(value);\n }\n triggerMap.set(value, el);\n}\n\nfunction unregisterTrigger(value: string) {\n triggerMap.delete(value);\n const idx = triggerOrder.indexOf(value);\n if (idx !== -1) triggerOrder.splice(idx, 1);\n}\n\nfunction getEnabledTriggers(): string[] {\n return triggerOrder.filter((v) => {\n const el = triggerMap.get(v);\n return el && !el.hasAttribute('disabled');\n });\n}\n\nfunction focusPrev(value: string) {\n const enabled = getEnabledTriggers();\n const idx = enabled.indexOf(value);\n const prev = idx > 0 ? idx - 1 : enabled.length - 1;\n triggerMap.get(enabled[prev])?.focus();\n}\n\nfunction focusNext(value: string) {\n const enabled = getEnabledTriggers();\n const idx = enabled.indexOf(value);\n const next = idx < enabled.length - 1 ? idx + 1 : 0;\n triggerMap.get(enabled[next])?.focus();\n}\n\nfunction focusFirst() {\n const enabled = getEnabledTriggers();\n if (enabled.length) triggerMap.get(enabled[0])?.focus();\n}\n\nfunction focusLast() {\n const enabled = getEnabledTriggers();\n if (enabled.length) triggerMap.get(enabled[enabled.length - 1])?.focus();\n}\n\nprovide(accordionInjectionKey, {\n type: props.type,\n disabled: props.disabled,\n collapsible: props.collapsible,\n isItemOpen,\n toggleItem,\n registerTrigger,\n unregisterTrigger,\n focusPrev,\n focusNext,\n focusFirst,\n focusLast,\n});\n</script>\n\n<template>\n <div class=\"t-accordion\">\n <slot />\n </div>\n</template>\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"TAccordion.cjs","names":[],"sources":["../../src/components/TAccordion.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, provide, reactive } from 'vue';\nimport { type AccordionType, accordionInjectionKey } from './accordion';\n\nconst props = withDefaults(\n defineProps<{\n type?: AccordionType;\n modelValue?: string | string[];\n defaultValue?: string | string[];\n disabled?: boolean;\n collapsible?: boolean;\n }>(),\n {\n type: 'single',\n modelValue: undefined,\n defaultValue: undefined,\n disabled: false,\n collapsible: false,\n },\n);\n\nconst emit = defineEmits<{\n (e: 'update:modelValue', value: string | string[] | undefined): void;\n}>();\n\n// Internal uncontrolled state\nconst internalValue = computed<string[]>(() => {\n const def = props.defaultValue;\n if (def === undefined) return [];\n return Array.isArray(def) ? def : [def];\n});\n\nconst uncontrolledValue = reactive<Set<string>>(new Set(internalValue.value));\n\nconst isControlled = computed(() => props.modelValue !== undefined);\n\nconst openValues = computed<Set<string>>(() => {\n if (isControlled.value) {\n const mv = props.modelValue!;\n return new Set(Array.isArray(mv) ? mv : [mv]);\n }\n return uncontrolledValue;\n});\n\nfunction isItemOpen(value: string): boolean {\n return openValues.value.has(value);\n}\n\nfunction emitUpdate(values: Set<string>) {\n if (props.type === 'single') {\n const arr = [...values];\n emit('update:modelValue', arr.length > 0 ? arr[0] : undefined);\n } else {\n emit('update:modelValue', [...values]);\n }\n}\n\nfunction toggleItem(value: string) {\n const currentlyOpen = isItemOpen(value);\n\n if (props.type === 'single') {\n if (currentlyOpen) {\n if (props.collapsible) {\n if (!isControlled.value) {\n uncontrolledValue.delete(value);\n }\n emitUpdate(new Set());\n }\n } else {\n if (!isControlled.value) {\n uncontrolledValue.clear();\n uncontrolledValue.add(value);\n }\n emitUpdate(new Set([value]));\n }\n } else {\n // Multiple mode\n const next = new Set(openValues.value);\n if (currentlyOpen) {\n next.delete(value);\n } else {\n next.add(value);\n }\n if (!isControlled.value) {\n if (currentlyOpen) {\n uncontrolledValue.delete(value);\n } else {\n uncontrolledValue.add(value);\n }\n }\n emitUpdate(next);\n }\n}\n\n// Keyboard navigation between triggers\nconst triggerMap = new Map<string, HTMLElement>();\nconst triggerOrder: string[] = reactive([]);\n\nfunction registerTrigger(value: string, el: HTMLElement) {\n if (!triggerMap.has(value)) {\n triggerOrder.push(value);\n }\n triggerMap.set(value, el);\n}\n\nfunction unregisterTrigger(value: string) {\n triggerMap.delete(value);\n const idx = triggerOrder.indexOf(value);\n if (idx !== -1) triggerOrder.splice(idx, 1);\n}\n\nfunction getEnabledTriggers(): string[] {\n return triggerOrder.filter((v) => {\n const el = triggerMap.get(v);\n return el && !el.hasAttribute('disabled');\n });\n}\n\nfunction focusPrev(value: string) {\n const enabled = getEnabledTriggers();\n const idx = enabled.indexOf(value);\n const prev = idx > 0 ? idx - 1 : enabled.length - 1;\n triggerMap.get(enabled[prev])?.focus();\n}\n\nfunction focusNext(value: string) {\n const enabled = getEnabledTriggers();\n const idx = enabled.indexOf(value);\n const next = idx < enabled.length - 1 ? idx + 1 : 0;\n triggerMap.get(enabled[next])?.focus();\n}\n\nfunction focusFirst() {\n const enabled = getEnabledTriggers();\n if (enabled.length) triggerMap.get(enabled[0])?.focus();\n}\n\nfunction focusLast() {\n const enabled = getEnabledTriggers();\n if (enabled.length) triggerMap.get(enabled[enabled.length - 1])?.focus();\n}\n\nprovide(accordionInjectionKey, {\n type: computed(() => props.type),\n disabled: computed(() => props.disabled),\n collapsible: computed(() => props.collapsible),\n isItemOpen,\n toggleItem,\n registerTrigger,\n unregisterTrigger,\n focusPrev,\n focusNext,\n focusFirst,\n focusLast,\n});\n</script>\n\n<template>\n <div class=\"t-accordion\">\n <slot />\n </div>\n</template>\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TAccordion.js","names":[],"sources":["../../src/components/TAccordion.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, provide, reactive } from 'vue';\nimport { type AccordionType, accordionInjectionKey } from './accordion';\n\nconst props = withDefaults(\n defineProps<{\n type?: AccordionType;\n modelValue?: string | string[];\n defaultValue?: string | string[];\n disabled?: boolean;\n collapsible?: boolean;\n }>(),\n {\n type: 'single',\n modelValue: undefined,\n defaultValue: undefined,\n disabled: false,\n collapsible: false,\n },\n);\n\nconst emit = defineEmits<{\n (e: 'update:modelValue', value: string | string[] | undefined): void;\n}>();\n\n// Internal uncontrolled state\nconst internalValue = computed<string[]>(() => {\n const def = props.defaultValue;\n if (def === undefined) return [];\n return Array.isArray(def) ? def : [def];\n});\n\nconst uncontrolledValue = reactive<Set<string>>(new Set(internalValue.value));\n\nconst isControlled = computed(() => props.modelValue !== undefined);\n\nconst openValues = computed<Set<string>>(() => {\n if (isControlled.value) {\n const mv = props.modelValue!;\n return new Set(Array.isArray(mv) ? mv : [mv]);\n }\n return uncontrolledValue;\n});\n\nfunction isItemOpen(value: string): boolean {\n return openValues.value.has(value);\n}\n\nfunction emitUpdate(values: Set<string>) {\n if (props.type === 'single') {\n const arr = [...values];\n emit('update:modelValue', arr.length > 0 ? arr[0] : undefined);\n } else {\n emit('update:modelValue', [...values]);\n }\n}\n\nfunction toggleItem(value: string) {\n const currentlyOpen = isItemOpen(value);\n\n if (props.type === 'single') {\n if (currentlyOpen) {\n if (props.collapsible) {\n if (!isControlled.value) {\n uncontrolledValue.delete(value);\n }\n emitUpdate(new Set());\n }\n } else {\n if (!isControlled.value) {\n uncontrolledValue.clear();\n uncontrolledValue.add(value);\n }\n emitUpdate(new Set([value]));\n }\n } else {\n // Multiple mode\n const next = new Set(openValues.value);\n if (currentlyOpen) {\n next.delete(value);\n } else {\n next.add(value);\n }\n if (!isControlled.value) {\n if (currentlyOpen) {\n uncontrolledValue.delete(value);\n } else {\n uncontrolledValue.add(value);\n }\n }\n emitUpdate(next);\n }\n}\n\n// Keyboard navigation between triggers\nconst triggerMap = new Map<string, HTMLElement>();\nconst triggerOrder: string[] = reactive([]);\n\nfunction registerTrigger(value: string, el: HTMLElement) {\n if (!triggerMap.has(value)) {\n triggerOrder.push(value);\n }\n triggerMap.set(value, el);\n}\n\nfunction unregisterTrigger(value: string) {\n triggerMap.delete(value);\n const idx = triggerOrder.indexOf(value);\n if (idx !== -1) triggerOrder.splice(idx, 1);\n}\n\nfunction getEnabledTriggers(): string[] {\n return triggerOrder.filter((v) => {\n const el = triggerMap.get(v);\n return el && !el.hasAttribute('disabled');\n });\n}\n\nfunction focusPrev(value: string) {\n const enabled = getEnabledTriggers();\n const idx = enabled.indexOf(value);\n const prev = idx > 0 ? idx - 1 : enabled.length - 1;\n triggerMap.get(enabled[prev])?.focus();\n}\n\nfunction focusNext(value: string) {\n const enabled = getEnabledTriggers();\n const idx = enabled.indexOf(value);\n const next = idx < enabled.length - 1 ? idx + 1 : 0;\n triggerMap.get(enabled[next])?.focus();\n}\n\nfunction focusFirst() {\n const enabled = getEnabledTriggers();\n if (enabled.length) triggerMap.get(enabled[0])?.focus();\n}\n\nfunction focusLast() {\n const enabled = getEnabledTriggers();\n if (enabled.length) triggerMap.get(enabled[enabled.length - 1])?.focus();\n}\n\nprovide(accordionInjectionKey, {\n type: props.type,\n disabled: props.disabled,\n collapsible: props.collapsible,\n isItemOpen,\n toggleItem,\n registerTrigger,\n unregisterTrigger,\n focusPrev,\n focusNext,\n focusFirst,\n focusLast,\n});\n</script>\n\n<template>\n <div class=\"t-accordion\">\n <slot />\n </div>\n</template>\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"TAccordion.js","names":[],"sources":["../../src/components/TAccordion.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, provide, reactive } from 'vue';\nimport { type AccordionType, accordionInjectionKey } from './accordion';\n\nconst props = withDefaults(\n defineProps<{\n type?: AccordionType;\n modelValue?: string | string[];\n defaultValue?: string | string[];\n disabled?: boolean;\n collapsible?: boolean;\n }>(),\n {\n type: 'single',\n modelValue: undefined,\n defaultValue: undefined,\n disabled: false,\n collapsible: false,\n },\n);\n\nconst emit = defineEmits<{\n (e: 'update:modelValue', value: string | string[] | undefined): void;\n}>();\n\n// Internal uncontrolled state\nconst internalValue = computed<string[]>(() => {\n const def = props.defaultValue;\n if (def === undefined) return [];\n return Array.isArray(def) ? def : [def];\n});\n\nconst uncontrolledValue = reactive<Set<string>>(new Set(internalValue.value));\n\nconst isControlled = computed(() => props.modelValue !== undefined);\n\nconst openValues = computed<Set<string>>(() => {\n if (isControlled.value) {\n const mv = props.modelValue!;\n return new Set(Array.isArray(mv) ? mv : [mv]);\n }\n return uncontrolledValue;\n});\n\nfunction isItemOpen(value: string): boolean {\n return openValues.value.has(value);\n}\n\nfunction emitUpdate(values: Set<string>) {\n if (props.type === 'single') {\n const arr = [...values];\n emit('update:modelValue', arr.length > 0 ? arr[0] : undefined);\n } else {\n emit('update:modelValue', [...values]);\n }\n}\n\nfunction toggleItem(value: string) {\n const currentlyOpen = isItemOpen(value);\n\n if (props.type === 'single') {\n if (currentlyOpen) {\n if (props.collapsible) {\n if (!isControlled.value) {\n uncontrolledValue.delete(value);\n }\n emitUpdate(new Set());\n }\n } else {\n if (!isControlled.value) {\n uncontrolledValue.clear();\n uncontrolledValue.add(value);\n }\n emitUpdate(new Set([value]));\n }\n } else {\n // Multiple mode\n const next = new Set(openValues.value);\n if (currentlyOpen) {\n next.delete(value);\n } else {\n next.add(value);\n }\n if (!isControlled.value) {\n if (currentlyOpen) {\n uncontrolledValue.delete(value);\n } else {\n uncontrolledValue.add(value);\n }\n }\n emitUpdate(next);\n }\n}\n\n// Keyboard navigation between triggers\nconst triggerMap = new Map<string, HTMLElement>();\nconst triggerOrder: string[] = reactive([]);\n\nfunction registerTrigger(value: string, el: HTMLElement) {\n if (!triggerMap.has(value)) {\n triggerOrder.push(value);\n }\n triggerMap.set(value, el);\n}\n\nfunction unregisterTrigger(value: string) {\n triggerMap.delete(value);\n const idx = triggerOrder.indexOf(value);\n if (idx !== -1) triggerOrder.splice(idx, 1);\n}\n\nfunction getEnabledTriggers(): string[] {\n return triggerOrder.filter((v) => {\n const el = triggerMap.get(v);\n return el && !el.hasAttribute('disabled');\n });\n}\n\nfunction focusPrev(value: string) {\n const enabled = getEnabledTriggers();\n const idx = enabled.indexOf(value);\n const prev = idx > 0 ? idx - 1 : enabled.length - 1;\n triggerMap.get(enabled[prev])?.focus();\n}\n\nfunction focusNext(value: string) {\n const enabled = getEnabledTriggers();\n const idx = enabled.indexOf(value);\n const next = idx < enabled.length - 1 ? idx + 1 : 0;\n triggerMap.get(enabled[next])?.focus();\n}\n\nfunction focusFirst() {\n const enabled = getEnabledTriggers();\n if (enabled.length) triggerMap.get(enabled[0])?.focus();\n}\n\nfunction focusLast() {\n const enabled = getEnabledTriggers();\n if (enabled.length) triggerMap.get(enabled[enabled.length - 1])?.focus();\n}\n\nprovide(accordionInjectionKey, {\n type: computed(() => props.type),\n disabled: computed(() => props.disabled),\n collapsible: computed(() => props.collapsible),\n isItemOpen,\n toggleItem,\n registerTrigger,\n unregisterTrigger,\n focusPrev,\n focusNext,\n focusFirst,\n focusLast,\n});\n</script>\n\n<template>\n <div class=\"t-accordion\">\n <slot />\n </div>\n</template>\n"],"mappings":""}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
const e=require("./accordion.cjs");let t=require("vue");var n={class:`t-accordion`},r=(0,t.defineComponent)({__name:`TAccordion`,props:{type:{default:`single`},modelValue:{default:void 0},defaultValue:{default:void 0},disabled:{type:Boolean,default:!1},collapsible:{type:Boolean,default:!1}},emits:[`update:modelValue`],setup(r,{emit:i}){let a=r,o=i,s=(0,t.computed)(()=>{let e=a.defaultValue;return e===void 0?[]:Array.isArray(e)?e:[e]}),c=(0,t.reactive)(new Set(s.value)),l=(0,t.computed)(()=>a.modelValue!==void 0),u=(0,t.computed)(()=>{if(l.value){let e=a.modelValue;return new Set(Array.isArray(e)?e:[e])}return c});function d(e){return u.value.has(e)}function f(e){if(a.type===`single`){let t=[...e];o(`update:modelValue`,t.length>0?t[0]:void 0)}else o(`update:modelValue`,[...e])}function p(e){let t=d(e);if(a.type===`single`)t?a.collapsible&&(l.value||c.delete(e),f(new Set)):(l.value||(c.clear(),c.add(e)),f(new Set([e])));else{let n=new Set(u.value);t?n.delete(e):n.add(e),l.value||(t?c.delete(e):c.add(e)),f(n)}}let m=new Map,h=(0,t.reactive)([]);function g(e,t){m.has(e)||h.push(e),m.set(e,t)}function _(e){m.delete(e);let t=h.indexOf(e);t!==-1&&h.splice(t,1)}function v(){return h.filter(e=>{let t=m.get(e);return t&&!t.hasAttribute(`disabled`)})}function y(e){let t=v(),n=t.indexOf(e),r=n>0?n-1:t.length-1;m.get(t[r])?.focus()}function b(e){let t=v(),n=t.indexOf(e),r=n<t.length-1?n+1:0;m.get(t[r])?.focus()}function x(){let e=v();e.length&&m.get(e[0])?.focus()}function S(){let e=v();e.length&&m.get(e[e.length-1])?.focus()}return(0,t.provide)(e.accordionInjectionKey,{type:a.type,disabled:a.disabled,collapsible:a.collapsible,isItemOpen:d,toggleItem:p,registerTrigger:g,unregisterTrigger:_,focusPrev:y,focusNext:b,focusFirst:x,focusLast:S}),(e,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,n,[(0,t.renderSlot)(e.$slots,`default`)]))}});exports.default=r;
|
|
1
|
+
const e=require("./accordion.cjs");let t=require("vue");var n={class:`t-accordion`},r=(0,t.defineComponent)({__name:`TAccordion`,props:{type:{default:`single`},modelValue:{default:void 0},defaultValue:{default:void 0},disabled:{type:Boolean,default:!1},collapsible:{type:Boolean,default:!1}},emits:[`update:modelValue`],setup(r,{emit:i}){let a=r,o=i,s=(0,t.computed)(()=>{let e=a.defaultValue;return e===void 0?[]:Array.isArray(e)?e:[e]}),c=(0,t.reactive)(new Set(s.value)),l=(0,t.computed)(()=>a.modelValue!==void 0),u=(0,t.computed)(()=>{if(l.value){let e=a.modelValue;return new Set(Array.isArray(e)?e:[e])}return c});function d(e){return u.value.has(e)}function f(e){if(a.type===`single`){let t=[...e];o(`update:modelValue`,t.length>0?t[0]:void 0)}else o(`update:modelValue`,[...e])}function p(e){let t=d(e);if(a.type===`single`)t?a.collapsible&&(l.value||c.delete(e),f(new Set)):(l.value||(c.clear(),c.add(e)),f(new Set([e])));else{let n=new Set(u.value);t?n.delete(e):n.add(e),l.value||(t?c.delete(e):c.add(e)),f(n)}}let m=new Map,h=(0,t.reactive)([]);function g(e,t){m.has(e)||h.push(e),m.set(e,t)}function _(e){m.delete(e);let t=h.indexOf(e);t!==-1&&h.splice(t,1)}function v(){return h.filter(e=>{let t=m.get(e);return t&&!t.hasAttribute(`disabled`)})}function y(e){let t=v(),n=t.indexOf(e),r=n>0?n-1:t.length-1;m.get(t[r])?.focus()}function b(e){let t=v(),n=t.indexOf(e),r=n<t.length-1?n+1:0;m.get(t[r])?.focus()}function x(){let e=v();e.length&&m.get(e[0])?.focus()}function S(){let e=v();e.length&&m.get(e[e.length-1])?.focus()}return(0,t.provide)(e.accordionInjectionKey,{type:(0,t.computed)(()=>a.type),disabled:(0,t.computed)(()=>a.disabled),collapsible:(0,t.computed)(()=>a.collapsible),isItemOpen:d,toggleItem:p,registerTrigger:g,unregisterTrigger:_,focusPrev:y,focusNext:b,focusFirst:x,focusLast:S}),(e,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,n,[(0,t.renderSlot)(e.$slots,`default`)]))}});exports.default=r;
|
|
2
2
|
//# sourceMappingURL=TAccordion.vue_vue_type_script_setup_true_lang.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TAccordion.vue_vue_type_script_setup_true_lang.cjs","names":[],"sources":["../../src/components/TAccordion.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, provide, reactive } from 'vue';\nimport { type AccordionType, accordionInjectionKey } from './accordion';\n\nconst props = withDefaults(\n defineProps<{\n type?: AccordionType;\n modelValue?: string | string[];\n defaultValue?: string | string[];\n disabled?: boolean;\n collapsible?: boolean;\n }>(),\n {\n type: 'single',\n modelValue: undefined,\n defaultValue: undefined,\n disabled: false,\n collapsible: false,\n },\n);\n\nconst emit = defineEmits<{\n (e: 'update:modelValue', value: string | string[] | undefined): void;\n}>();\n\n// Internal uncontrolled state\nconst internalValue = computed<string[]>(() => {\n const def = props.defaultValue;\n if (def === undefined) return [];\n return Array.isArray(def) ? def : [def];\n});\n\nconst uncontrolledValue = reactive<Set<string>>(new Set(internalValue.value));\n\nconst isControlled = computed(() => props.modelValue !== undefined);\n\nconst openValues = computed<Set<string>>(() => {\n if (isControlled.value) {\n const mv = props.modelValue!;\n return new Set(Array.isArray(mv) ? mv : [mv]);\n }\n return uncontrolledValue;\n});\n\nfunction isItemOpen(value: string): boolean {\n return openValues.value.has(value);\n}\n\nfunction emitUpdate(values: Set<string>) {\n if (props.type === 'single') {\n const arr = [...values];\n emit('update:modelValue', arr.length > 0 ? arr[0] : undefined);\n } else {\n emit('update:modelValue', [...values]);\n }\n}\n\nfunction toggleItem(value: string) {\n const currentlyOpen = isItemOpen(value);\n\n if (props.type === 'single') {\n if (currentlyOpen) {\n if (props.collapsible) {\n if (!isControlled.value) {\n uncontrolledValue.delete(value);\n }\n emitUpdate(new Set());\n }\n } else {\n if (!isControlled.value) {\n uncontrolledValue.clear();\n uncontrolledValue.add(value);\n }\n emitUpdate(new Set([value]));\n }\n } else {\n // Multiple mode\n const next = new Set(openValues.value);\n if (currentlyOpen) {\n next.delete(value);\n } else {\n next.add(value);\n }\n if (!isControlled.value) {\n if (currentlyOpen) {\n uncontrolledValue.delete(value);\n } else {\n uncontrolledValue.add(value);\n }\n }\n emitUpdate(next);\n }\n}\n\n// Keyboard navigation between triggers\nconst triggerMap = new Map<string, HTMLElement>();\nconst triggerOrder: string[] = reactive([]);\n\nfunction registerTrigger(value: string, el: HTMLElement) {\n if (!triggerMap.has(value)) {\n triggerOrder.push(value);\n }\n triggerMap.set(value, el);\n}\n\nfunction unregisterTrigger(value: string) {\n triggerMap.delete(value);\n const idx = triggerOrder.indexOf(value);\n if (idx !== -1) triggerOrder.splice(idx, 1);\n}\n\nfunction getEnabledTriggers(): string[] {\n return triggerOrder.filter((v) => {\n const el = triggerMap.get(v);\n return el && !el.hasAttribute('disabled');\n });\n}\n\nfunction focusPrev(value: string) {\n const enabled = getEnabledTriggers();\n const idx = enabled.indexOf(value);\n const prev = idx > 0 ? idx - 1 : enabled.length - 1;\n triggerMap.get(enabled[prev])?.focus();\n}\n\nfunction focusNext(value: string) {\n const enabled = getEnabledTriggers();\n const idx = enabled.indexOf(value);\n const next = idx < enabled.length - 1 ? idx + 1 : 0;\n triggerMap.get(enabled[next])?.focus();\n}\n\nfunction focusFirst() {\n const enabled = getEnabledTriggers();\n if (enabled.length) triggerMap.get(enabled[0])?.focus();\n}\n\nfunction focusLast() {\n const enabled = getEnabledTriggers();\n if (enabled.length) triggerMap.get(enabled[enabled.length - 1])?.focus();\n}\n\nprovide(accordionInjectionKey, {\n type: props.type,\n disabled: props.disabled,\n collapsible: props.collapsible,\n isItemOpen,\n toggleItem,\n registerTrigger,\n unregisterTrigger,\n focusPrev,\n focusNext,\n focusFirst,\n focusLast,\n});\n</script>\n\n<template>\n <div class=\"t-accordion\">\n <slot />\n </div>\n</template>\n"],"mappings":"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
|
|
1
|
+
{"version":3,"file":"TAccordion.vue_vue_type_script_setup_true_lang.cjs","names":[],"sources":["../../src/components/TAccordion.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, provide, reactive } from 'vue';\nimport { type AccordionType, accordionInjectionKey } from './accordion';\n\nconst props = withDefaults(\n defineProps<{\n type?: AccordionType;\n modelValue?: string | string[];\n defaultValue?: string | string[];\n disabled?: boolean;\n collapsible?: boolean;\n }>(),\n {\n type: 'single',\n modelValue: undefined,\n defaultValue: undefined,\n disabled: false,\n collapsible: false,\n },\n);\n\nconst emit = defineEmits<{\n (e: 'update:modelValue', value: string | string[] | undefined): void;\n}>();\n\n// Internal uncontrolled state\nconst internalValue = computed<string[]>(() => {\n const def = props.defaultValue;\n if (def === undefined) return [];\n return Array.isArray(def) ? def : [def];\n});\n\nconst uncontrolledValue = reactive<Set<string>>(new Set(internalValue.value));\n\nconst isControlled = computed(() => props.modelValue !== undefined);\n\nconst openValues = computed<Set<string>>(() => {\n if (isControlled.value) {\n const mv = props.modelValue!;\n return new Set(Array.isArray(mv) ? mv : [mv]);\n }\n return uncontrolledValue;\n});\n\nfunction isItemOpen(value: string): boolean {\n return openValues.value.has(value);\n}\n\nfunction emitUpdate(values: Set<string>) {\n if (props.type === 'single') {\n const arr = [...values];\n emit('update:modelValue', arr.length > 0 ? arr[0] : undefined);\n } else {\n emit('update:modelValue', [...values]);\n }\n}\n\nfunction toggleItem(value: string) {\n const currentlyOpen = isItemOpen(value);\n\n if (props.type === 'single') {\n if (currentlyOpen) {\n if (props.collapsible) {\n if (!isControlled.value) {\n uncontrolledValue.delete(value);\n }\n emitUpdate(new Set());\n }\n } else {\n if (!isControlled.value) {\n uncontrolledValue.clear();\n uncontrolledValue.add(value);\n }\n emitUpdate(new Set([value]));\n }\n } else {\n // Multiple mode\n const next = new Set(openValues.value);\n if (currentlyOpen) {\n next.delete(value);\n } else {\n next.add(value);\n }\n if (!isControlled.value) {\n if (currentlyOpen) {\n uncontrolledValue.delete(value);\n } else {\n uncontrolledValue.add(value);\n }\n }\n emitUpdate(next);\n }\n}\n\n// Keyboard navigation between triggers\nconst triggerMap = new Map<string, HTMLElement>();\nconst triggerOrder: string[] = reactive([]);\n\nfunction registerTrigger(value: string, el: HTMLElement) {\n if (!triggerMap.has(value)) {\n triggerOrder.push(value);\n }\n triggerMap.set(value, el);\n}\n\nfunction unregisterTrigger(value: string) {\n triggerMap.delete(value);\n const idx = triggerOrder.indexOf(value);\n if (idx !== -1) triggerOrder.splice(idx, 1);\n}\n\nfunction getEnabledTriggers(): string[] {\n return triggerOrder.filter((v) => {\n const el = triggerMap.get(v);\n return el && !el.hasAttribute('disabled');\n });\n}\n\nfunction focusPrev(value: string) {\n const enabled = getEnabledTriggers();\n const idx = enabled.indexOf(value);\n const prev = idx > 0 ? idx - 1 : enabled.length - 1;\n triggerMap.get(enabled[prev])?.focus();\n}\n\nfunction focusNext(value: string) {\n const enabled = getEnabledTriggers();\n const idx = enabled.indexOf(value);\n const next = idx < enabled.length - 1 ? idx + 1 : 0;\n triggerMap.get(enabled[next])?.focus();\n}\n\nfunction focusFirst() {\n const enabled = getEnabledTriggers();\n if (enabled.length) triggerMap.get(enabled[0])?.focus();\n}\n\nfunction focusLast() {\n const enabled = getEnabledTriggers();\n if (enabled.length) triggerMap.get(enabled[enabled.length - 1])?.focus();\n}\n\nprovide(accordionInjectionKey, {\n type: computed(() => props.type),\n disabled: computed(() => props.disabled),\n collapsible: computed(() => props.collapsible),\n isItemOpen,\n toggleItem,\n registerTrigger,\n unregisterTrigger,\n focusPrev,\n focusNext,\n focusFirst,\n focusLast,\n});\n</script>\n\n<template>\n <div class=\"t-accordion\">\n <slot />\n </div>\n</template>\n"],"mappings":"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"}
|
|
@@ -77,9 +77,9 @@ var c = { class: "t-accordion" }, l = /*@__PURE__*/ r({
|
|
|
77
77
|
e.length && y.get(e[e.length - 1])?.focus();
|
|
78
78
|
}
|
|
79
79
|
return a(e, {
|
|
80
|
-
type: u.type,
|
|
81
|
-
disabled: u.disabled,
|
|
82
|
-
collapsible: u.collapsible,
|
|
80
|
+
type: t(() => u.type),
|
|
81
|
+
disabled: t(() => u.disabled),
|
|
82
|
+
collapsible: t(() => u.collapsible),
|
|
83
83
|
isItemOpen: g,
|
|
84
84
|
toggleItem: v,
|
|
85
85
|
registerTrigger: x,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TAccordion.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../src/components/TAccordion.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, provide, reactive } from 'vue';\nimport { type AccordionType, accordionInjectionKey } from './accordion';\n\nconst props = withDefaults(\n defineProps<{\n type?: AccordionType;\n modelValue?: string | string[];\n defaultValue?: string | string[];\n disabled?: boolean;\n collapsible?: boolean;\n }>(),\n {\n type: 'single',\n modelValue: undefined,\n defaultValue: undefined,\n disabled: false,\n collapsible: false,\n },\n);\n\nconst emit = defineEmits<{\n (e: 'update:modelValue', value: string | string[] | undefined): void;\n}>();\n\n// Internal uncontrolled state\nconst internalValue = computed<string[]>(() => {\n const def = props.defaultValue;\n if (def === undefined) return [];\n return Array.isArray(def) ? def : [def];\n});\n\nconst uncontrolledValue = reactive<Set<string>>(new Set(internalValue.value));\n\nconst isControlled = computed(() => props.modelValue !== undefined);\n\nconst openValues = computed<Set<string>>(() => {\n if (isControlled.value) {\n const mv = props.modelValue!;\n return new Set(Array.isArray(mv) ? mv : [mv]);\n }\n return uncontrolledValue;\n});\n\nfunction isItemOpen(value: string): boolean {\n return openValues.value.has(value);\n}\n\nfunction emitUpdate(values: Set<string>) {\n if (props.type === 'single') {\n const arr = [...values];\n emit('update:modelValue', arr.length > 0 ? arr[0] : undefined);\n } else {\n emit('update:modelValue', [...values]);\n }\n}\n\nfunction toggleItem(value: string) {\n const currentlyOpen = isItemOpen(value);\n\n if (props.type === 'single') {\n if (currentlyOpen) {\n if (props.collapsible) {\n if (!isControlled.value) {\n uncontrolledValue.delete(value);\n }\n emitUpdate(new Set());\n }\n } else {\n if (!isControlled.value) {\n uncontrolledValue.clear();\n uncontrolledValue.add(value);\n }\n emitUpdate(new Set([value]));\n }\n } else {\n // Multiple mode\n const next = new Set(openValues.value);\n if (currentlyOpen) {\n next.delete(value);\n } else {\n next.add(value);\n }\n if (!isControlled.value) {\n if (currentlyOpen) {\n uncontrolledValue.delete(value);\n } else {\n uncontrolledValue.add(value);\n }\n }\n emitUpdate(next);\n }\n}\n\n// Keyboard navigation between triggers\nconst triggerMap = new Map<string, HTMLElement>();\nconst triggerOrder: string[] = reactive([]);\n\nfunction registerTrigger(value: string, el: HTMLElement) {\n if (!triggerMap.has(value)) {\n triggerOrder.push(value);\n }\n triggerMap.set(value, el);\n}\n\nfunction unregisterTrigger(value: string) {\n triggerMap.delete(value);\n const idx = triggerOrder.indexOf(value);\n if (idx !== -1) triggerOrder.splice(idx, 1);\n}\n\nfunction getEnabledTriggers(): string[] {\n return triggerOrder.filter((v) => {\n const el = triggerMap.get(v);\n return el && !el.hasAttribute('disabled');\n });\n}\n\nfunction focusPrev(value: string) {\n const enabled = getEnabledTriggers();\n const idx = enabled.indexOf(value);\n const prev = idx > 0 ? idx - 1 : enabled.length - 1;\n triggerMap.get(enabled[prev])?.focus();\n}\n\nfunction focusNext(value: string) {\n const enabled = getEnabledTriggers();\n const idx = enabled.indexOf(value);\n const next = idx < enabled.length - 1 ? idx + 1 : 0;\n triggerMap.get(enabled[next])?.focus();\n}\n\nfunction focusFirst() {\n const enabled = getEnabledTriggers();\n if (enabled.length) triggerMap.get(enabled[0])?.focus();\n}\n\nfunction focusLast() {\n const enabled = getEnabledTriggers();\n if (enabled.length) triggerMap.get(enabled[enabled.length - 1])?.focus();\n}\n\nprovide(accordionInjectionKey, {\n type: props.type,\n disabled: props.disabled,\n collapsible: props.collapsible,\n isItemOpen,\n toggleItem,\n registerTrigger,\n unregisterTrigger,\n focusPrev,\n focusNext,\n focusFirst,\n focusLast,\n});\n</script>\n\n<template>\n <div class=\"t-accordion\">\n <slot />\n </div>\n</template>\n"],"mappings":"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
|
|
1
|
+
{"version":3,"file":"TAccordion.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../src/components/TAccordion.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, provide, reactive } from 'vue';\nimport { type AccordionType, accordionInjectionKey } from './accordion';\n\nconst props = withDefaults(\n defineProps<{\n type?: AccordionType;\n modelValue?: string | string[];\n defaultValue?: string | string[];\n disabled?: boolean;\n collapsible?: boolean;\n }>(),\n {\n type: 'single',\n modelValue: undefined,\n defaultValue: undefined,\n disabled: false,\n collapsible: false,\n },\n);\n\nconst emit = defineEmits<{\n (e: 'update:modelValue', value: string | string[] | undefined): void;\n}>();\n\n// Internal uncontrolled state\nconst internalValue = computed<string[]>(() => {\n const def = props.defaultValue;\n if (def === undefined) return [];\n return Array.isArray(def) ? def : [def];\n});\n\nconst uncontrolledValue = reactive<Set<string>>(new Set(internalValue.value));\n\nconst isControlled = computed(() => props.modelValue !== undefined);\n\nconst openValues = computed<Set<string>>(() => {\n if (isControlled.value) {\n const mv = props.modelValue!;\n return new Set(Array.isArray(mv) ? mv : [mv]);\n }\n return uncontrolledValue;\n});\n\nfunction isItemOpen(value: string): boolean {\n return openValues.value.has(value);\n}\n\nfunction emitUpdate(values: Set<string>) {\n if (props.type === 'single') {\n const arr = [...values];\n emit('update:modelValue', arr.length > 0 ? arr[0] : undefined);\n } else {\n emit('update:modelValue', [...values]);\n }\n}\n\nfunction toggleItem(value: string) {\n const currentlyOpen = isItemOpen(value);\n\n if (props.type === 'single') {\n if (currentlyOpen) {\n if (props.collapsible) {\n if (!isControlled.value) {\n uncontrolledValue.delete(value);\n }\n emitUpdate(new Set());\n }\n } else {\n if (!isControlled.value) {\n uncontrolledValue.clear();\n uncontrolledValue.add(value);\n }\n emitUpdate(new Set([value]));\n }\n } else {\n // Multiple mode\n const next = new Set(openValues.value);\n if (currentlyOpen) {\n next.delete(value);\n } else {\n next.add(value);\n }\n if (!isControlled.value) {\n if (currentlyOpen) {\n uncontrolledValue.delete(value);\n } else {\n uncontrolledValue.add(value);\n }\n }\n emitUpdate(next);\n }\n}\n\n// Keyboard navigation between triggers\nconst triggerMap = new Map<string, HTMLElement>();\nconst triggerOrder: string[] = reactive([]);\n\nfunction registerTrigger(value: string, el: HTMLElement) {\n if (!triggerMap.has(value)) {\n triggerOrder.push(value);\n }\n triggerMap.set(value, el);\n}\n\nfunction unregisterTrigger(value: string) {\n triggerMap.delete(value);\n const idx = triggerOrder.indexOf(value);\n if (idx !== -1) triggerOrder.splice(idx, 1);\n}\n\nfunction getEnabledTriggers(): string[] {\n return triggerOrder.filter((v) => {\n const el = triggerMap.get(v);\n return el && !el.hasAttribute('disabled');\n });\n}\n\nfunction focusPrev(value: string) {\n const enabled = getEnabledTriggers();\n const idx = enabled.indexOf(value);\n const prev = idx > 0 ? idx - 1 : enabled.length - 1;\n triggerMap.get(enabled[prev])?.focus();\n}\n\nfunction focusNext(value: string) {\n const enabled = getEnabledTriggers();\n const idx = enabled.indexOf(value);\n const next = idx < enabled.length - 1 ? idx + 1 : 0;\n triggerMap.get(enabled[next])?.focus();\n}\n\nfunction focusFirst() {\n const enabled = getEnabledTriggers();\n if (enabled.length) triggerMap.get(enabled[0])?.focus();\n}\n\nfunction focusLast() {\n const enabled = getEnabledTriggers();\n if (enabled.length) triggerMap.get(enabled[enabled.length - 1])?.focus();\n}\n\nprovide(accordionInjectionKey, {\n type: computed(() => props.type),\n disabled: computed(() => props.disabled),\n collapsible: computed(() => props.collapsible),\n isItemOpen,\n toggleItem,\n registerTrigger,\n unregisterTrigger,\n focusPrev,\n focusNext,\n focusFirst,\n focusLast,\n});\n</script>\n\n<template>\n <div class=\"t-accordion\">\n <slot />\n </div>\n</template>\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TAccordionItem.cjs","names":[],"sources":["../../src/components/TAccordionItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, inject, onMounted, onBeforeUnmount, ref, useId } from 'vue';\nimport { accordionInjectionKey } from './accordion';\n\nconst props = withDefaults(\n defineProps<{\n value: string;\n disabled?: boolean;\n }>(),\n {\n disabled: false,\n },\n);\n\nconst injected = inject(accordionInjectionKey);\n\nif (!injected) {\n throw new Error('[TreeUI] TAccordionItem must be used inside a TAccordion.');\n}\n\nconst ctx = injected;\n\nconst triggerId = useId();\nconst panelId = useId();\nconst triggerRef = ref<HTMLButtonElement | null>(null);\n\nconst isOpen = computed(() => ctx.isItemOpen(props.value));\nconst isDisabled = computed(() => props.disabled || ctx.disabled);\n\nconst itemClasses = computed(() => [\n 't-accordion__item',\n {\n 'is-open': isOpen.value,\n 'is-disabled': isDisabled.value,\n },\n]);\n\nfunction handleToggle() {\n if (isDisabled.value) return;\n ctx.toggleItem(props.value);\n}\n\nfunction handleKeydown(event: KeyboardEvent) {\n if (isDisabled.value) return;\n\n switch (event.key) {\n case 'ArrowDown':\n event.preventDefault();\n ctx.focusNext(props.value);\n break;\n case 'ArrowUp':\n event.preventDefault();\n ctx.focusPrev(props.value);\n break;\n case 'Home':\n event.preventDefault();\n ctx.focusFirst();\n break;\n case 'End':\n event.preventDefault();\n ctx.focusLast();\n break;\n }\n}\n\nonMounted(() => {\n if (triggerRef.value) {\n ctx.registerTrigger(props.value, triggerRef.value);\n }\n});\n\nonBeforeUnmount(() => {\n ctx.unregisterTrigger(props.value);\n});\n</script>\n\n<template>\n <div :class=\"itemClasses\">\n <h3 class=\"t-accordion__heading\">\n <button\n :id=\"triggerId\"\n ref=\"triggerRef\"\n type=\"button\"\n class=\"t-accordion__trigger\"\n :aria-expanded=\"isOpen\"\n :aria-controls=\"panelId\"\n :disabled=\"isDisabled || undefined\"\n @click=\"handleToggle\"\n @keydown=\"handleKeydown\"\n >\n <slot\n name=\"trigger\"\n :open=\"isOpen\"\n >\n {{ value }}\n </slot>\n <svg\n class=\"t-accordion__icon\"\n :class=\"{ 'is-open': isOpen }\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\"\n >\n <polyline points=\"6 9 12 15 18 9\" />\n </svg>\n </button>\n </h3>\n <div\n v-if=\"isOpen\"\n :id=\"panelId\"\n role=\"region\"\n :aria-labelledby=\"triggerId\"\n class=\"t-accordion__content\"\n >\n <div class=\"t-accordion__panel\">\n <slot />\n </div>\n </div>\n </div>\n</template>\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"TAccordionItem.cjs","names":[],"sources":["../../src/components/TAccordionItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, inject, onMounted, onBeforeUnmount, ref, useId } from 'vue';\nimport { accordionInjectionKey } from './accordion';\n\nconst props = withDefaults(\n defineProps<{\n value: string;\n disabled?: boolean;\n }>(),\n {\n disabled: false,\n },\n);\n\nconst injected = inject(accordionInjectionKey);\n\nif (!injected) {\n throw new Error('[TreeUI] TAccordionItem must be used inside a TAccordion.');\n}\n\nconst ctx = injected;\n\nconst triggerId = useId();\nconst panelId = useId();\nconst triggerRef = ref<HTMLButtonElement | null>(null);\n\nconst isOpen = computed(() => ctx.isItemOpen(props.value));\nconst isDisabled = computed(() => props.disabled || ctx.disabled.value);\n\nconst itemClasses = computed(() => [\n 't-accordion__item',\n {\n 'is-open': isOpen.value,\n 'is-disabled': isDisabled.value,\n },\n]);\n\nfunction handleToggle() {\n if (isDisabled.value) return;\n ctx.toggleItem(props.value);\n}\n\nfunction handleKeydown(event: KeyboardEvent) {\n if (isDisabled.value) return;\n\n switch (event.key) {\n case 'ArrowDown':\n event.preventDefault();\n ctx.focusNext(props.value);\n break;\n case 'ArrowUp':\n event.preventDefault();\n ctx.focusPrev(props.value);\n break;\n case 'Home':\n event.preventDefault();\n ctx.focusFirst();\n break;\n case 'End':\n event.preventDefault();\n ctx.focusLast();\n break;\n }\n}\n\nonMounted(() => {\n if (triggerRef.value) {\n ctx.registerTrigger(props.value, triggerRef.value);\n }\n});\n\nonBeforeUnmount(() => {\n ctx.unregisterTrigger(props.value);\n});\n</script>\n\n<template>\n <div :class=\"itemClasses\">\n <h3 class=\"t-accordion__heading\">\n <button\n :id=\"triggerId\"\n ref=\"triggerRef\"\n type=\"button\"\n class=\"t-accordion__trigger\"\n :aria-expanded=\"isOpen\"\n :aria-controls=\"panelId\"\n :disabled=\"isDisabled || undefined\"\n @click=\"handleToggle\"\n @keydown=\"handleKeydown\"\n >\n <slot\n name=\"trigger\"\n :open=\"isOpen\"\n >\n {{ value }}\n </slot>\n <svg\n class=\"t-accordion__icon\"\n :class=\"{ 'is-open': isOpen }\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\"\n >\n <polyline points=\"6 9 12 15 18 9\" />\n </svg>\n </button>\n </h3>\n <div\n v-if=\"isOpen\"\n :id=\"panelId\"\n role=\"region\"\n :aria-labelledby=\"triggerId\"\n class=\"t-accordion__content\"\n >\n <div class=\"t-accordion__panel\">\n <slot />\n </div>\n </div>\n </div>\n</template>\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TAccordionItem.js","names":[],"sources":["../../src/components/TAccordionItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, inject, onMounted, onBeforeUnmount, ref, useId } from 'vue';\nimport { accordionInjectionKey } from './accordion';\n\nconst props = withDefaults(\n defineProps<{\n value: string;\n disabled?: boolean;\n }>(),\n {\n disabled: false,\n },\n);\n\nconst injected = inject(accordionInjectionKey);\n\nif (!injected) {\n throw new Error('[TreeUI] TAccordionItem must be used inside a TAccordion.');\n}\n\nconst ctx = injected;\n\nconst triggerId = useId();\nconst panelId = useId();\nconst triggerRef = ref<HTMLButtonElement | null>(null);\n\nconst isOpen = computed(() => ctx.isItemOpen(props.value));\nconst isDisabled = computed(() => props.disabled || ctx.disabled);\n\nconst itemClasses = computed(() => [\n 't-accordion__item',\n {\n 'is-open': isOpen.value,\n 'is-disabled': isDisabled.value,\n },\n]);\n\nfunction handleToggle() {\n if (isDisabled.value) return;\n ctx.toggleItem(props.value);\n}\n\nfunction handleKeydown(event: KeyboardEvent) {\n if (isDisabled.value) return;\n\n switch (event.key) {\n case 'ArrowDown':\n event.preventDefault();\n ctx.focusNext(props.value);\n break;\n case 'ArrowUp':\n event.preventDefault();\n ctx.focusPrev(props.value);\n break;\n case 'Home':\n event.preventDefault();\n ctx.focusFirst();\n break;\n case 'End':\n event.preventDefault();\n ctx.focusLast();\n break;\n }\n}\n\nonMounted(() => {\n if (triggerRef.value) {\n ctx.registerTrigger(props.value, triggerRef.value);\n }\n});\n\nonBeforeUnmount(() => {\n ctx.unregisterTrigger(props.value);\n});\n</script>\n\n<template>\n <div :class=\"itemClasses\">\n <h3 class=\"t-accordion__heading\">\n <button\n :id=\"triggerId\"\n ref=\"triggerRef\"\n type=\"button\"\n class=\"t-accordion__trigger\"\n :aria-expanded=\"isOpen\"\n :aria-controls=\"panelId\"\n :disabled=\"isDisabled || undefined\"\n @click=\"handleToggle\"\n @keydown=\"handleKeydown\"\n >\n <slot\n name=\"trigger\"\n :open=\"isOpen\"\n >\n {{ value }}\n </slot>\n <svg\n class=\"t-accordion__icon\"\n :class=\"{ 'is-open': isOpen }\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\"\n >\n <polyline points=\"6 9 12 15 18 9\" />\n </svg>\n </button>\n </h3>\n <div\n v-if=\"isOpen\"\n :id=\"panelId\"\n role=\"region\"\n :aria-labelledby=\"triggerId\"\n class=\"t-accordion__content\"\n >\n <div class=\"t-accordion__panel\">\n <slot />\n </div>\n </div>\n </div>\n</template>\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"TAccordionItem.js","names":[],"sources":["../../src/components/TAccordionItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, inject, onMounted, onBeforeUnmount, ref, useId } from 'vue';\nimport { accordionInjectionKey } from './accordion';\n\nconst props = withDefaults(\n defineProps<{\n value: string;\n disabled?: boolean;\n }>(),\n {\n disabled: false,\n },\n);\n\nconst injected = inject(accordionInjectionKey);\n\nif (!injected) {\n throw new Error('[TreeUI] TAccordionItem must be used inside a TAccordion.');\n}\n\nconst ctx = injected;\n\nconst triggerId = useId();\nconst panelId = useId();\nconst triggerRef = ref<HTMLButtonElement | null>(null);\n\nconst isOpen = computed(() => ctx.isItemOpen(props.value));\nconst isDisabled = computed(() => props.disabled || ctx.disabled.value);\n\nconst itemClasses = computed(() => [\n 't-accordion__item',\n {\n 'is-open': isOpen.value,\n 'is-disabled': isDisabled.value,\n },\n]);\n\nfunction handleToggle() {\n if (isDisabled.value) return;\n ctx.toggleItem(props.value);\n}\n\nfunction handleKeydown(event: KeyboardEvent) {\n if (isDisabled.value) return;\n\n switch (event.key) {\n case 'ArrowDown':\n event.preventDefault();\n ctx.focusNext(props.value);\n break;\n case 'ArrowUp':\n event.preventDefault();\n ctx.focusPrev(props.value);\n break;\n case 'Home':\n event.preventDefault();\n ctx.focusFirst();\n break;\n case 'End':\n event.preventDefault();\n ctx.focusLast();\n break;\n }\n}\n\nonMounted(() => {\n if (triggerRef.value) {\n ctx.registerTrigger(props.value, triggerRef.value);\n }\n});\n\nonBeforeUnmount(() => {\n ctx.unregisterTrigger(props.value);\n});\n</script>\n\n<template>\n <div :class=\"itemClasses\">\n <h3 class=\"t-accordion__heading\">\n <button\n :id=\"triggerId\"\n ref=\"triggerRef\"\n type=\"button\"\n class=\"t-accordion__trigger\"\n :aria-expanded=\"isOpen\"\n :aria-controls=\"panelId\"\n :disabled=\"isDisabled || undefined\"\n @click=\"handleToggle\"\n @keydown=\"handleKeydown\"\n >\n <slot\n name=\"trigger\"\n :open=\"isOpen\"\n >\n {{ value }}\n </slot>\n <svg\n class=\"t-accordion__icon\"\n :class=\"{ 'is-open': isOpen }\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\"\n >\n <polyline points=\"6 9 12 15 18 9\" />\n </svg>\n </button>\n </h3>\n <div\n v-if=\"isOpen\"\n :id=\"panelId\"\n role=\"region\"\n :aria-labelledby=\"triggerId\"\n class=\"t-accordion__content\"\n >\n <div class=\"t-accordion__panel\">\n <slot />\n </div>\n </div>\n </div>\n</template>\n"],"mappings":""}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
const e=require("./accordion.cjs");let t=require("vue");var n={class:`t-accordion__heading`},r=[`id`,`aria-expanded`,`aria-controls`,`disabled`],i=[`id`,`aria-labelledby`],a={class:`t-accordion__panel`},o=(0,t.defineComponent)({__name:`TAccordionItem`,props:{value:{},disabled:{type:Boolean,default:!1}},setup(o){let s=o,c=(0,t.inject)(e.accordionInjectionKey);if(!c)throw Error(`[TreeUI] TAccordionItem must be used inside a TAccordion.`);let l=c,u=(0,t.useId)(),d=(0,t.useId)(),f=(0,t.ref)(null),p=(0,t.computed)(()=>l.isItemOpen(s.value)),m=(0,t.computed)(()=>s.disabled||l.disabled),h=(0,t.computed)(()=>[`t-accordion__item`,{"is-open":p.value,"is-disabled":m.value}]);function g(){m.value||l.toggleItem(s.value)}function _(e){if(!m.value)switch(e.key){case`ArrowDown`:e.preventDefault(),l.focusNext(s.value);break;case`ArrowUp`:e.preventDefault(),l.focusPrev(s.value);break;case`Home`:e.preventDefault(),l.focusFirst();break;case`End`:e.preventDefault(),l.focusLast();break}}return(0,t.onMounted)(()=>{f.value&&l.registerTrigger(s.value,f.value)}),(0,t.onBeforeUnmount)(()=>{l.unregisterTrigger(s.value)}),(e,s)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{class:(0,t.normalizeClass)(h.value)},[(0,t.createElementVNode)(`h3`,n,[(0,t.createElementVNode)(`button`,{id:(0,t.unref)(u),ref_key:`triggerRef`,ref:f,type:`button`,class:`t-accordion__trigger`,"aria-expanded":p.value,"aria-controls":(0,t.unref)(d),disabled:m.value||void 0,onClick:g,onKeydown:_},[(0,t.renderSlot)(e.$slots,`trigger`,{open:p.value},()=>[(0,t.createTextVNode)((0,t.toDisplayString)(o.value),1)]),((0,t.openBlock)(),(0,t.createElementBlock)(`svg`,{class:(0,t.normalizeClass)([`t-accordion__icon`,{"is-open":p.value}]),xmlns:`http://www.w3.org/2000/svg`,width:`16`,height:`16`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,"stroke-width":`2`,"stroke-linecap":`round`,"stroke-linejoin":`round`,"aria-hidden":`true`},[...s[0]||=[(0,t.createElementVNode)(`polyline`,{points:`6 9 12 15 18 9`},null,-1)]],2))],40,r)]),p.value?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:0,id:(0,t.unref)(d),role:`region`,"aria-labelledby":(0,t.unref)(u),class:`t-accordion__content`},[(0,t.createElementVNode)(`div`,a,[(0,t.renderSlot)(e.$slots,`default`)])],8,i)):(0,t.createCommentVNode)(``,!0)],2))}});exports.default=o;
|
|
1
|
+
const e=require("./accordion.cjs");let t=require("vue");var n={class:`t-accordion__heading`},r=[`id`,`aria-expanded`,`aria-controls`,`disabled`],i=[`id`,`aria-labelledby`],a={class:`t-accordion__panel`},o=(0,t.defineComponent)({__name:`TAccordionItem`,props:{value:{},disabled:{type:Boolean,default:!1}},setup(o){let s=o,c=(0,t.inject)(e.accordionInjectionKey);if(!c)throw Error(`[TreeUI] TAccordionItem must be used inside a TAccordion.`);let l=c,u=(0,t.useId)(),d=(0,t.useId)(),f=(0,t.ref)(null),p=(0,t.computed)(()=>l.isItemOpen(s.value)),m=(0,t.computed)(()=>s.disabled||l.disabled.value),h=(0,t.computed)(()=>[`t-accordion__item`,{"is-open":p.value,"is-disabled":m.value}]);function g(){m.value||l.toggleItem(s.value)}function _(e){if(!m.value)switch(e.key){case`ArrowDown`:e.preventDefault(),l.focusNext(s.value);break;case`ArrowUp`:e.preventDefault(),l.focusPrev(s.value);break;case`Home`:e.preventDefault(),l.focusFirst();break;case`End`:e.preventDefault(),l.focusLast();break}}return(0,t.onMounted)(()=>{f.value&&l.registerTrigger(s.value,f.value)}),(0,t.onBeforeUnmount)(()=>{l.unregisterTrigger(s.value)}),(e,s)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{class:(0,t.normalizeClass)(h.value)},[(0,t.createElementVNode)(`h3`,n,[(0,t.createElementVNode)(`button`,{id:(0,t.unref)(u),ref_key:`triggerRef`,ref:f,type:`button`,class:`t-accordion__trigger`,"aria-expanded":p.value,"aria-controls":(0,t.unref)(d),disabled:m.value||void 0,onClick:g,onKeydown:_},[(0,t.renderSlot)(e.$slots,`trigger`,{open:p.value},()=>[(0,t.createTextVNode)((0,t.toDisplayString)(o.value),1)]),((0,t.openBlock)(),(0,t.createElementBlock)(`svg`,{class:(0,t.normalizeClass)([`t-accordion__icon`,{"is-open":p.value}]),xmlns:`http://www.w3.org/2000/svg`,width:`16`,height:`16`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,"stroke-width":`2`,"stroke-linecap":`round`,"stroke-linejoin":`round`,"aria-hidden":`true`},[...s[0]||=[(0,t.createElementVNode)(`polyline`,{points:`6 9 12 15 18 9`},null,-1)]],2))],40,r)]),p.value?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:0,id:(0,t.unref)(d),role:`region`,"aria-labelledby":(0,t.unref)(u),class:`t-accordion__content`},[(0,t.createElementVNode)(`div`,a,[(0,t.renderSlot)(e.$slots,`default`)])],8,i)):(0,t.createCommentVNode)(``,!0)],2))}});exports.default=o;
|
|
2
2
|
//# sourceMappingURL=TAccordionItem.vue_vue_type_script_setup_true_lang.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TAccordionItem.vue_vue_type_script_setup_true_lang.cjs","names":[],"sources":["../../src/components/TAccordionItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, inject, onMounted, onBeforeUnmount, ref, useId } from 'vue';\nimport { accordionInjectionKey } from './accordion';\n\nconst props = withDefaults(\n defineProps<{\n value: string;\n disabled?: boolean;\n }>(),\n {\n disabled: false,\n },\n);\n\nconst injected = inject(accordionInjectionKey);\n\nif (!injected) {\n throw new Error('[TreeUI] TAccordionItem must be used inside a TAccordion.');\n}\n\nconst ctx = injected;\n\nconst triggerId = useId();\nconst panelId = useId();\nconst triggerRef = ref<HTMLButtonElement | null>(null);\n\nconst isOpen = computed(() => ctx.isItemOpen(props.value));\nconst isDisabled = computed(() => props.disabled || ctx.disabled);\n\nconst itemClasses = computed(() => [\n 't-accordion__item',\n {\n 'is-open': isOpen.value,\n 'is-disabled': isDisabled.value,\n },\n]);\n\nfunction handleToggle() {\n if (isDisabled.value) return;\n ctx.toggleItem(props.value);\n}\n\nfunction handleKeydown(event: KeyboardEvent) {\n if (isDisabled.value) return;\n\n switch (event.key) {\n case 'ArrowDown':\n event.preventDefault();\n ctx.focusNext(props.value);\n break;\n case 'ArrowUp':\n event.preventDefault();\n ctx.focusPrev(props.value);\n break;\n case 'Home':\n event.preventDefault();\n ctx.focusFirst();\n break;\n case 'End':\n event.preventDefault();\n ctx.focusLast();\n break;\n }\n}\n\nonMounted(() => {\n if (triggerRef.value) {\n ctx.registerTrigger(props.value, triggerRef.value);\n }\n});\n\nonBeforeUnmount(() => {\n ctx.unregisterTrigger(props.value);\n});\n</script>\n\n<template>\n <div :class=\"itemClasses\">\n <h3 class=\"t-accordion__heading\">\n <button\n :id=\"triggerId\"\n ref=\"triggerRef\"\n type=\"button\"\n class=\"t-accordion__trigger\"\n :aria-expanded=\"isOpen\"\n :aria-controls=\"panelId\"\n :disabled=\"isDisabled || undefined\"\n @click=\"handleToggle\"\n @keydown=\"handleKeydown\"\n >\n <slot\n name=\"trigger\"\n :open=\"isOpen\"\n >\n {{ value }}\n </slot>\n <svg\n class=\"t-accordion__icon\"\n :class=\"{ 'is-open': isOpen }\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\"\n >\n <polyline points=\"6 9 12 15 18 9\" />\n </svg>\n </button>\n </h3>\n <div\n v-if=\"isOpen\"\n :id=\"panelId\"\n role=\"region\"\n :aria-labelledby=\"triggerId\"\n class=\"t-accordion__content\"\n >\n <div class=\"t-accordion__panel\">\n <slot />\n </div>\n </div>\n </div>\n</template>\n"],"mappings":"yTAIA,IAAM,EAAQ,EAUR,GAAA,EAAA,EAAA,OAAA,CAAkB,EAAA,qBAAqB,EAE7C,GAAI,CAAC,EACH,MAAU,MAAM,2DAA2D,EAG7E,IAAM,EAAM,EAEN,GAAA,EAAA,EAAA,MAAA,CAAkB,EAClB,GAAA,EAAA,EAAA,MAAA,CAAgB,EAChB,GAAA,EAAA,EAAA,IAAA,CAA2C,IAAI,EAE/C,GAAA,EAAA,EAAA,SAAA,KAAwB,EAAI,WAAW,EAAM,KAAK,CAAC,EACnD,GAAA,EAAA,EAAA,SAAA,KAA4B,EAAM,UAAY,EAAI,
|
|
1
|
+
{"version":3,"file":"TAccordionItem.vue_vue_type_script_setup_true_lang.cjs","names":[],"sources":["../../src/components/TAccordionItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, inject, onMounted, onBeforeUnmount, ref, useId } from 'vue';\nimport { accordionInjectionKey } from './accordion';\n\nconst props = withDefaults(\n defineProps<{\n value: string;\n disabled?: boolean;\n }>(),\n {\n disabled: false,\n },\n);\n\nconst injected = inject(accordionInjectionKey);\n\nif (!injected) {\n throw new Error('[TreeUI] TAccordionItem must be used inside a TAccordion.');\n}\n\nconst ctx = injected;\n\nconst triggerId = useId();\nconst panelId = useId();\nconst triggerRef = ref<HTMLButtonElement | null>(null);\n\nconst isOpen = computed(() => ctx.isItemOpen(props.value));\nconst isDisabled = computed(() => props.disabled || ctx.disabled.value);\n\nconst itemClasses = computed(() => [\n 't-accordion__item',\n {\n 'is-open': isOpen.value,\n 'is-disabled': isDisabled.value,\n },\n]);\n\nfunction handleToggle() {\n if (isDisabled.value) return;\n ctx.toggleItem(props.value);\n}\n\nfunction handleKeydown(event: KeyboardEvent) {\n if (isDisabled.value) return;\n\n switch (event.key) {\n case 'ArrowDown':\n event.preventDefault();\n ctx.focusNext(props.value);\n break;\n case 'ArrowUp':\n event.preventDefault();\n ctx.focusPrev(props.value);\n break;\n case 'Home':\n event.preventDefault();\n ctx.focusFirst();\n break;\n case 'End':\n event.preventDefault();\n ctx.focusLast();\n break;\n }\n}\n\nonMounted(() => {\n if (triggerRef.value) {\n ctx.registerTrigger(props.value, triggerRef.value);\n }\n});\n\nonBeforeUnmount(() => {\n ctx.unregisterTrigger(props.value);\n});\n</script>\n\n<template>\n <div :class=\"itemClasses\">\n <h3 class=\"t-accordion__heading\">\n <button\n :id=\"triggerId\"\n ref=\"triggerRef\"\n type=\"button\"\n class=\"t-accordion__trigger\"\n :aria-expanded=\"isOpen\"\n :aria-controls=\"panelId\"\n :disabled=\"isDisabled || undefined\"\n @click=\"handleToggle\"\n @keydown=\"handleKeydown\"\n >\n <slot\n name=\"trigger\"\n :open=\"isOpen\"\n >\n {{ value }}\n </slot>\n <svg\n class=\"t-accordion__icon\"\n :class=\"{ 'is-open': isOpen }\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\"\n >\n <polyline points=\"6 9 12 15 18 9\" />\n </svg>\n </button>\n </h3>\n <div\n v-if=\"isOpen\"\n :id=\"panelId\"\n role=\"region\"\n :aria-labelledby=\"triggerId\"\n class=\"t-accordion__content\"\n >\n <div class=\"t-accordion__panel\">\n <slot />\n </div>\n </div>\n </div>\n</template>\n"],"mappings":"yTAIA,IAAM,EAAQ,EAUR,GAAA,EAAA,EAAA,OAAA,CAAkB,EAAA,qBAAqB,EAE7C,GAAI,CAAC,EACH,MAAU,MAAM,2DAA2D,EAG7E,IAAM,EAAM,EAEN,GAAA,EAAA,EAAA,MAAA,CAAkB,EAClB,GAAA,EAAA,EAAA,MAAA,CAAgB,EAChB,GAAA,EAAA,EAAA,IAAA,CAA2C,IAAI,EAE/C,GAAA,EAAA,EAAA,SAAA,KAAwB,EAAI,WAAW,EAAM,KAAK,CAAC,EACnD,GAAA,EAAA,EAAA,SAAA,KAA4B,EAAM,UAAY,EAAI,SAAS,KAAK,EAEhE,GAAA,EAAA,EAAA,SAAA,KAA6B,CACjC,oBACA,CACE,UAAW,EAAO,MAClB,cAAe,EAAW,KAC5B,CACF,CAAC,EAED,SAAS,GAAe,CAClB,EAAW,OACf,EAAI,WAAW,EAAM,KAAK,CAC5B,CAEA,SAAS,EAAc,EAAsB,CACvC,MAAW,MAEf,OAAQ,EAAM,IAAd,CACE,IAAK,YACH,EAAM,eAAe,EACrB,EAAI,UAAU,EAAM,KAAK,EACzB,MACF,IAAK,UACH,EAAM,eAAe,EACrB,EAAI,UAAU,EAAM,KAAK,EACzB,MACF,IAAK,OACH,EAAM,eAAe,EACrB,EAAI,WAAW,EACf,MACF,IAAK,MACH,EAAM,eAAe,EACrB,EAAI,UAAU,EACd,KACJ,CACF,QAEA,EAAA,EAAA,UAAA,KAAgB,CACV,EAAW,OACb,EAAI,gBAAgB,EAAM,MAAO,EAAW,KAAK,CAErD,CAAC,GAED,EAAA,EAAA,gBAAA,KAAsB,CACpB,EAAI,kBAAkB,EAAM,KAAK,CACnC,CAAC,qDAoDO,MAAA,CAhDA,OAAA,EAAA,EAAA,eAAA,CAAO,EAAA,KAAW,CAAA,EAAA,EAAA,EAAA,EAAA,mBAAA,CAoCjB,KAnCL,EAmCK,EAAA,EAAA,EAAA,mBAAA,CADM,SAAA,CAhCN,IAAA,EAAA,EAAA,MAAA,CAAI,CAAA,UACD,aAAJ,IAAI,EACJ,KAAK,SACL,MAAM,uBACL,gBAAe,EAAA,MACf,iBAAA,EAAA,EAAA,MAAA,CAAe,CAAA,EACf,SAAU,EAAA,OAAc,IAAA,GACxB,QAAO,EACP,UAAS,qBAOH,EAAA,OAAA,UAAA,CAHJ,KAAM,EAAA,KAAM,MAGR,EAAA,EAAA,EAAA,gBAAA,EAAA,EAAA,EAAA,gBAAA,CADF,EAAA,KAAK,EAAA,CAAA,CAAA,CAAA,IAAA,EAAA,EAAA,UAAA,CAAA,GAAA,EAAA,EAAA,mBAAA,CAiBJ,MAAA,CAdJ,OAAA,EAAA,EAAA,eAAA,CAAK,CAAC,oBAAmB,CAAA,UACJ,EAAA,KAAM,CAAA,CAAA,EAC3B,MAAM,6BACN,MAAM,KACN,OAAO,KACP,QAAQ,YACR,KAAK,OACL,OAAO,eACP,eAAa,IACb,iBAAe,QACf,kBAAgB,QAChB,cAAY,6CAEwB,WAAA,CAA1B,OAAO,gBAAgB,EAAA,KAAA,EAAA,CAAA,CAAA,EAAA,CAAA,EAAA,EAAA,GAAA,CAAA,CAAA,CAAA,EAK/B,EAAA,QAAA,EAAA,EAAA,UAAA,CAAA,GAAA,EAAA,EAAA,mBAAA,CASF,MAAA,OARH,IAAA,EAAA,EAAA,MAAA,CAAI,CAAA,EACL,KAAK,SACJ,mBAAA,EAAA,EAAA,MAAA,CAAiB,CAAA,EAClB,MAAM,kDAIA,MAFN,EAEM,EAAA,EAAA,EAAA,WAAA,CADI,EAAA,OAAA,SAAA,CAAA,CAAA,CAAA,EAAA,EAAA,CAAA,IAAA,EAAA,EAAA,mBAAA,CAAA,GAAA,EAAA,CAAA,EAAA,CAAA"}
|
|
@@ -18,7 +18,7 @@ var _ = { class: "t-accordion__heading" }, v = [
|
|
|
18
18
|
setup(o) {
|
|
19
19
|
let x = o, S = s(e);
|
|
20
20
|
if (!S) throw Error("[TreeUI] TAccordionItem must be used inside a TAccordion.");
|
|
21
|
-
let C = S, w = g(), T = g(), E = f(null), D = t(() => C.isItemOpen(x.value)), O = t(() => x.disabled || C.disabled), k = t(() => ["t-accordion__item", {
|
|
21
|
+
let C = S, w = g(), T = g(), E = f(null), D = t(() => C.isItemOpen(x.value)), O = t(() => x.disabled || C.disabled.value), k = t(() => ["t-accordion__item", {
|
|
22
22
|
"is-open": D.value,
|
|
23
23
|
"is-disabled": O.value
|
|
24
24
|
}]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TAccordionItem.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../src/components/TAccordionItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, inject, onMounted, onBeforeUnmount, ref, useId } from 'vue';\nimport { accordionInjectionKey } from './accordion';\n\nconst props = withDefaults(\n defineProps<{\n value: string;\n disabled?: boolean;\n }>(),\n {\n disabled: false,\n },\n);\n\nconst injected = inject(accordionInjectionKey);\n\nif (!injected) {\n throw new Error('[TreeUI] TAccordionItem must be used inside a TAccordion.');\n}\n\nconst ctx = injected;\n\nconst triggerId = useId();\nconst panelId = useId();\nconst triggerRef = ref<HTMLButtonElement | null>(null);\n\nconst isOpen = computed(() => ctx.isItemOpen(props.value));\nconst isDisabled = computed(() => props.disabled || ctx.disabled);\n\nconst itemClasses = computed(() => [\n 't-accordion__item',\n {\n 'is-open': isOpen.value,\n 'is-disabled': isDisabled.value,\n },\n]);\n\nfunction handleToggle() {\n if (isDisabled.value) return;\n ctx.toggleItem(props.value);\n}\n\nfunction handleKeydown(event: KeyboardEvent) {\n if (isDisabled.value) return;\n\n switch (event.key) {\n case 'ArrowDown':\n event.preventDefault();\n ctx.focusNext(props.value);\n break;\n case 'ArrowUp':\n event.preventDefault();\n ctx.focusPrev(props.value);\n break;\n case 'Home':\n event.preventDefault();\n ctx.focusFirst();\n break;\n case 'End':\n event.preventDefault();\n ctx.focusLast();\n break;\n }\n}\n\nonMounted(() => {\n if (triggerRef.value) {\n ctx.registerTrigger(props.value, triggerRef.value);\n }\n});\n\nonBeforeUnmount(() => {\n ctx.unregisterTrigger(props.value);\n});\n</script>\n\n<template>\n <div :class=\"itemClasses\">\n <h3 class=\"t-accordion__heading\">\n <button\n :id=\"triggerId\"\n ref=\"triggerRef\"\n type=\"button\"\n class=\"t-accordion__trigger\"\n :aria-expanded=\"isOpen\"\n :aria-controls=\"panelId\"\n :disabled=\"isDisabled || undefined\"\n @click=\"handleToggle\"\n @keydown=\"handleKeydown\"\n >\n <slot\n name=\"trigger\"\n :open=\"isOpen\"\n >\n {{ value }}\n </slot>\n <svg\n class=\"t-accordion__icon\"\n :class=\"{ 'is-open': isOpen }\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\"\n >\n <polyline points=\"6 9 12 15 18 9\" />\n </svg>\n </button>\n </h3>\n <div\n v-if=\"isOpen\"\n :id=\"panelId\"\n role=\"region\"\n :aria-labelledby=\"triggerId\"\n class=\"t-accordion__content\"\n >\n <div class=\"t-accordion__panel\">\n <slot />\n </div>\n </div>\n </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;EAIA,IAAM,IAAQ,GAUR,IAAW,EAAO,CAAqB;EAE7C,IAAI,CAAC,GACH,MAAU,MAAM,2DAA2D;EAG7E,IAAM,IAAM,GAEN,IAAY,EAAM,GAClB,IAAU,EAAM,GAChB,IAAa,EAA8B,IAAI,GAE/C,IAAS,QAAe,EAAI,WAAW,EAAM,KAAK,CAAC,GACnD,IAAa,QAAe,EAAM,YAAY,EAAI,
|
|
1
|
+
{"version":3,"file":"TAccordionItem.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../src/components/TAccordionItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, inject, onMounted, onBeforeUnmount, ref, useId } from 'vue';\nimport { accordionInjectionKey } from './accordion';\n\nconst props = withDefaults(\n defineProps<{\n value: string;\n disabled?: boolean;\n }>(),\n {\n disabled: false,\n },\n);\n\nconst injected = inject(accordionInjectionKey);\n\nif (!injected) {\n throw new Error('[TreeUI] TAccordionItem must be used inside a TAccordion.');\n}\n\nconst ctx = injected;\n\nconst triggerId = useId();\nconst panelId = useId();\nconst triggerRef = ref<HTMLButtonElement | null>(null);\n\nconst isOpen = computed(() => ctx.isItemOpen(props.value));\nconst isDisabled = computed(() => props.disabled || ctx.disabled.value);\n\nconst itemClasses = computed(() => [\n 't-accordion__item',\n {\n 'is-open': isOpen.value,\n 'is-disabled': isDisabled.value,\n },\n]);\n\nfunction handleToggle() {\n if (isDisabled.value) return;\n ctx.toggleItem(props.value);\n}\n\nfunction handleKeydown(event: KeyboardEvent) {\n if (isDisabled.value) return;\n\n switch (event.key) {\n case 'ArrowDown':\n event.preventDefault();\n ctx.focusNext(props.value);\n break;\n case 'ArrowUp':\n event.preventDefault();\n ctx.focusPrev(props.value);\n break;\n case 'Home':\n event.preventDefault();\n ctx.focusFirst();\n break;\n case 'End':\n event.preventDefault();\n ctx.focusLast();\n break;\n }\n}\n\nonMounted(() => {\n if (triggerRef.value) {\n ctx.registerTrigger(props.value, triggerRef.value);\n }\n});\n\nonBeforeUnmount(() => {\n ctx.unregisterTrigger(props.value);\n});\n</script>\n\n<template>\n <div :class=\"itemClasses\">\n <h3 class=\"t-accordion__heading\">\n <button\n :id=\"triggerId\"\n ref=\"triggerRef\"\n type=\"button\"\n class=\"t-accordion__trigger\"\n :aria-expanded=\"isOpen\"\n :aria-controls=\"panelId\"\n :disabled=\"isDisabled || undefined\"\n @click=\"handleToggle\"\n @keydown=\"handleKeydown\"\n >\n <slot\n name=\"trigger\"\n :open=\"isOpen\"\n >\n {{ value }}\n </slot>\n <svg\n class=\"t-accordion__icon\"\n :class=\"{ 'is-open': isOpen }\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\"\n >\n <polyline points=\"6 9 12 15 18 9\" />\n </svg>\n </button>\n </h3>\n <div\n v-if=\"isOpen\"\n :id=\"panelId\"\n role=\"region\"\n :aria-labelledby=\"triggerId\"\n class=\"t-accordion__content\"\n >\n <div class=\"t-accordion__panel\">\n <slot />\n </div>\n </div>\n </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;EAIA,IAAM,IAAQ,GAUR,IAAW,EAAO,CAAqB;EAE7C,IAAI,CAAC,GACH,MAAU,MAAM,2DAA2D;EAG7E,IAAM,IAAM,GAEN,IAAY,EAAM,GAClB,IAAU,EAAM,GAChB,IAAa,EAA8B,IAAI,GAE/C,IAAS,QAAe,EAAI,WAAW,EAAM,KAAK,CAAC,GACnD,IAAa,QAAe,EAAM,YAAY,EAAI,SAAS,KAAK,GAEhE,IAAc,QAAe,CACjC,qBACA;GACE,WAAW,EAAO;GAClB,eAAe,EAAW;EAC5B,CACF,CAAC;EAED,SAAS,IAAe;GAClB,EAAW,SACf,EAAI,WAAW,EAAM,KAAK;EAC5B;EAEA,SAAS,EAAc,GAAsB;GACvC,OAAW,OAEf,QAAQ,EAAM,KAAd;IACE,KAAK;KAEH,AADA,EAAM,eAAe,GACrB,EAAI,UAAU,EAAM,KAAK;KACzB;IACF,KAAK;KAEH,AADA,EAAM,eAAe,GACrB,EAAI,UAAU,EAAM,KAAK;KACzB;IACF,KAAK;KAEH,AADA,EAAM,eAAe,GACrB,EAAI,WAAW;KACf;IACF,KAAK;KAEH,AADA,EAAM,eAAe,GACrB,EAAI,UAAU;KACd;GACJ;EACF;SAEA,QAAgB;GACd,AAAI,EAAW,SACb,EAAI,gBAAgB,EAAM,OAAO,EAAW,KAAK;EAErD,CAAC,GAED,QAAsB;GACpB,EAAI,kBAAkB,EAAM,KAAK;EACnC,CAAC,mBAIC,EAgDM,OAAA,EAhDA,OAAK,EAAE,EAAA,KAAW,EAAA,GAAA,CACtB,EAmCK,MAnCL,GAmCK,CAlCH,EAiCS,UAAA;GAhCN,IAAI,EAAA,CAAA;YACD;GAAJ,KAAI;GACJ,MAAK;GACL,OAAM;GACL,iBAAe,EAAA;GACf,iBAAe,EAAA,CAAA;GACf,UAAU,EAAA,SAAc,KAAA;GACxB,SAAO;GACP,WAAS;MAEV,EAKO,EAAA,QAAA,WAAA,EAHJ,MAAM,EAAA,MAAM,SAGR,CAAA,EAAA,EADF,EAAA,KAAK,GAAA,CAAA,CAAA,CAAA,IAAA,EAAA,GAEV,EAeM,OAAA;GAdJ,OAAK,EAAA,CAAC,qBAAmB,EAAA,WACJ,EAAA,MAAM,CAAA,CAAA;GAC3B,OAAM;GACN,OAAM;GACN,QAAO;GACP,SAAQ;GACR,MAAK;GACL,QAAO;GACP,gBAAa;GACb,kBAAe;GACf,mBAAgB;GAChB,eAAY;mBAEZ,EAAoC,YAAA,EAA1B,QAAO,iBAAgB,GAAA,MAAA,EAAA,CAAA,CAAA,GAAA,CAAA,EAAA,GAAA,IAAA,CAAA,CAAA,CAAA,GAK/B,EAAA,SAAA,EAAA,GADR,EAUM,OAAA;;GARH,IAAI,EAAA,CAAA;GACL,MAAK;GACJ,mBAAiB,EAAA,CAAA;GAClB,OAAM;MAEN,EAEM,OAFN,GAEM,CADJ,EAAQ,EAAA,QAAA,SAAA,CAAA,CAAA,CAAA,GAAA,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,GAAA,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TCard.cjs","names":[],"sources":["../../src/components/TCard.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport type { TCardVariant, TSize } from '../types/contracts';\n\nconst props = withDefaults(\n defineProps<{\n as?: string;\n variant?: TCardVariant;\n size?: TSize;\n title?: string;\n }>(),\n {\n as: 'section',\n variant: 'outline',\n size: 'md',\n title: undefined,\n },\n);\n\nconst classes = computed(() => [\n 't-card',\n `t-card--${props.variant}`,\n `t-card--${props.size}`,\n]);\n\nconst hasHeader = computed(() => !!props.title);\n</script>\n\n<template>\n <component\n :is=\"as\"\n :class=\"classes\"\n >\n <header\n v-if=\"$slots.header || hasHeader || $slots.actions\"\n class=\"t-card__header\"\n >\n <slot name=\"header\">\n <span\n v-if=\"title\"\n class=\"t-card__title\"\n >\n {{ title }}\n </span>\n
|
|
1
|
+
{"version":3,"file":"TCard.cjs","names":[],"sources":["../../src/components/TCard.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport type { TCardVariant, TSize } from '../types/contracts';\n\nconst props = withDefaults(\n defineProps<{\n as?: string;\n variant?: TCardVariant;\n size?: TSize;\n title?: string;\n }>(),\n {\n as: 'section',\n variant: 'outline',\n size: 'md',\n title: undefined,\n },\n);\n\nconst classes = computed(() => [\n 't-card',\n `t-card--${props.variant}`,\n `t-card--${props.size}`,\n]);\n\nconst hasHeader = computed(() => !!props.title);\n</script>\n\n<template>\n <component\n :is=\"as\"\n :class=\"classes\"\n >\n <header\n v-if=\"$slots.header || hasHeader || $slots.actions\"\n class=\"t-card__header\"\n >\n <slot name=\"header\">\n <span\n v-if=\"title\"\n class=\"t-card__title\"\n >\n {{ title }}\n </span>\n </slot>\n <span\n v-if=\"$slots.actions\"\n class=\"t-card__actions\"\n >\n <slot name=\"actions\" />\n </span>\n </header>\n <div class=\"t-card__body\">\n <slot />\n </div>\n <footer\n v-if=\"$slots.footer\"\n class=\"t-card__footer\"\n >\n <slot name=\"footer\" />\n </footer>\n </component>\n</template>\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TCard.js","names":[],"sources":["../../src/components/TCard.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport type { TCardVariant, TSize } from '../types/contracts';\n\nconst props = withDefaults(\n defineProps<{\n as?: string;\n variant?: TCardVariant;\n size?: TSize;\n title?: string;\n }>(),\n {\n as: 'section',\n variant: 'outline',\n size: 'md',\n title: undefined,\n },\n);\n\nconst classes = computed(() => [\n 't-card',\n `t-card--${props.variant}`,\n `t-card--${props.size}`,\n]);\n\nconst hasHeader = computed(() => !!props.title);\n</script>\n\n<template>\n <component\n :is=\"as\"\n :class=\"classes\"\n >\n <header\n v-if=\"$slots.header || hasHeader || $slots.actions\"\n class=\"t-card__header\"\n >\n <slot name=\"header\">\n <span\n v-if=\"title\"\n class=\"t-card__title\"\n >\n {{ title }}\n </span>\n
|
|
1
|
+
{"version":3,"file":"TCard.js","names":[],"sources":["../../src/components/TCard.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport type { TCardVariant, TSize } from '../types/contracts';\n\nconst props = withDefaults(\n defineProps<{\n as?: string;\n variant?: TCardVariant;\n size?: TSize;\n title?: string;\n }>(),\n {\n as: 'section',\n variant: 'outline',\n size: 'md',\n title: undefined,\n },\n);\n\nconst classes = computed(() => [\n 't-card',\n `t-card--${props.variant}`,\n `t-card--${props.size}`,\n]);\n\nconst hasHeader = computed(() => !!props.title);\n</script>\n\n<template>\n <component\n :is=\"as\"\n :class=\"classes\"\n >\n <header\n v-if=\"$slots.header || hasHeader || $slots.actions\"\n class=\"t-card__header\"\n >\n <slot name=\"header\">\n <span\n v-if=\"title\"\n class=\"t-card__title\"\n >\n {{ title }}\n </span>\n </slot>\n <span\n v-if=\"$slots.actions\"\n class=\"t-card__actions\"\n >\n <slot name=\"actions\" />\n </span>\n </header>\n <div class=\"t-card__body\">\n <slot />\n </div>\n <footer\n v-if=\"$slots.footer\"\n class=\"t-card__footer\"\n >\n <slot name=\"footer\" />\n </footer>\n </component>\n</template>\n"],"mappings":""}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
let e=require("vue");var t={key:0,class:`t-card__header`},n={key:0,class:`t-card__title`},r={key:
|
|
1
|
+
let e=require("vue");var t={key:0,class:`t-card__header`},n={key:0,class:`t-card__title`},r={key:0,class:`t-card__actions`},i={class:`t-card__body`},a={key:1,class:`t-card__footer`},o=(0,e.defineComponent)({__name:`TCard`,props:{as:{default:`section`},variant:{default:`outline`},size:{default:`md`},title:{default:void 0}},setup(o){let s=o,c=(0,e.computed)(()=>[`t-card`,`t-card--${s.variant}`,`t-card--${s.size}`]),l=(0,e.computed)(()=>!!s.title);return(s,u)=>((0,e.openBlock)(),(0,e.createBlock)((0,e.resolveDynamicComponent)(o.as),{class:(0,e.normalizeClass)(c.value)},{default:(0,e.withCtx)(()=>[s.$slots.header||l.value||s.$slots.actions?((0,e.openBlock)(),(0,e.createElementBlock)(`header`,t,[(0,e.renderSlot)(s.$slots,`header`,{},()=>[o.title?((0,e.openBlock)(),(0,e.createElementBlock)(`span`,n,(0,e.toDisplayString)(o.title),1)):(0,e.createCommentVNode)(``,!0)]),s.$slots.actions?((0,e.openBlock)(),(0,e.createElementBlock)(`span`,r,[(0,e.renderSlot)(s.$slots,`actions`)])):(0,e.createCommentVNode)(``,!0)])):(0,e.createCommentVNode)(``,!0),(0,e.createElementVNode)(`div`,i,[(0,e.renderSlot)(s.$slots,`default`)]),s.$slots.footer?((0,e.openBlock)(),(0,e.createElementBlock)(`footer`,a,[(0,e.renderSlot)(s.$slots,`footer`)])):(0,e.createCommentVNode)(``,!0)]),_:3},8,[`class`]))}});exports.default=o;
|
|
2
2
|
//# sourceMappingURL=TCard.vue_vue_type_script_setup_true_lang.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TCard.vue_vue_type_script_setup_true_lang.cjs","names":["$slots"],"sources":["../../src/components/TCard.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport type { TCardVariant, TSize } from '../types/contracts';\n\nconst props = withDefaults(\n defineProps<{\n as?: string;\n variant?: TCardVariant;\n size?: TSize;\n title?: string;\n }>(),\n {\n as: 'section',\n variant: 'outline',\n size: 'md',\n title: undefined,\n },\n);\n\nconst classes = computed(() => [\n 't-card',\n `t-card--${props.variant}`,\n `t-card--${props.size}`,\n]);\n\nconst hasHeader = computed(() => !!props.title);\n</script>\n\n<template>\n <component\n :is=\"as\"\n :class=\"classes\"\n >\n <header\n v-if=\"$slots.header || hasHeader || $slots.actions\"\n class=\"t-card__header\"\n >\n <slot name=\"header\">\n <span\n v-if=\"title\"\n class=\"t-card__title\"\n >\n {{ title }}\n </span>\n
|
|
1
|
+
{"version":3,"file":"TCard.vue_vue_type_script_setup_true_lang.cjs","names":["$slots"],"sources":["../../src/components/TCard.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport type { TCardVariant, TSize } from '../types/contracts';\n\nconst props = withDefaults(\n defineProps<{\n as?: string;\n variant?: TCardVariant;\n size?: TSize;\n title?: string;\n }>(),\n {\n as: 'section',\n variant: 'outline',\n size: 'md',\n title: undefined,\n },\n);\n\nconst classes = computed(() => [\n 't-card',\n `t-card--${props.variant}`,\n `t-card--${props.size}`,\n]);\n\nconst hasHeader = computed(() => !!props.title);\n</script>\n\n<template>\n <component\n :is=\"as\"\n :class=\"classes\"\n >\n <header\n v-if=\"$slots.header || hasHeader || $slots.actions\"\n class=\"t-card__header\"\n >\n <slot name=\"header\">\n <span\n v-if=\"title\"\n class=\"t-card__title\"\n >\n {{ title }}\n </span>\n </slot>\n <span\n v-if=\"$slots.actions\"\n class=\"t-card__actions\"\n >\n <slot name=\"actions\" />\n </span>\n </header>\n <div class=\"t-card__body\">\n <slot />\n </div>\n <footer\n v-if=\"$slots.footer\"\n class=\"t-card__footer\"\n >\n <slot name=\"footer\" />\n </footer>\n </component>\n</template>\n"],"mappings":"6UAIA,IAAM,EAAQ,EAeR,GAAA,EAAA,EAAA,SAAA,KAAyB,CAC7B,SACA,WAAW,EAAM,UACjB,WAAW,EAAM,MACnB,CAAC,EAEK,GAAA,EAAA,EAAA,SAAA,KAA2B,CAAC,CAAC,EAAM,KAAK,kFAKrC,EAAA,EAAE,EAAA,CACN,OAAA,EAAA,EAAA,eAAA,CAAO,EAAA,KAAO,CAAA,EAAA,2BAoBN,CAjBDA,EAAAA,OAAO,QAAU,EAAA,OAAaA,EAAAA,OAAO,UAAA,EAAA,EAAA,UAAA,CAAA,GAAA,EAAA,EAAA,mBAAA,CAiBpC,SAlBT,EAkBS,EAAA,EAAA,EAAA,WAAA,CAPA,EAAA,OAAA,SAAA,CAAA,MAAA,CALG,EAAA,QAAA,EAAA,EAAA,UAAA,CAAA,GAAA,EAAA,EAAA,mBAAA,CAID,OALP,GAAA,EAAA,EAAA,gBAAA,CAIK,EAAA,KAAK,EAAA,CAAA,IAAA,EAAA,EAAA,mBAAA,CAAA,GAAA,EAAA,CAAA,CAAA,EAIJA,EAAAA,OAAO,UAAA,EAAA,EAAA,UAAA,CAAA,GAAA,EAAA,EAAA,mBAAA,CAIR,OALP,EAKO,EAAA,EAAA,EAAA,WAAA,CADkB,EAAA,OAAA,SAAA,CAAA,CAAA,IAAA,EAAA,EAAA,mBAAA,CAAA,GAAA,EAAA,CAAA,CAAA,IAAA,EAAA,EAAA,mBAAA,CAAA,GAAA,EAAA,2BAKrB,MAFN,EAEM,EAAA,EAAA,EAAA,WAAA,CADI,EAAA,OAAA,SAAA,CAAA,CAAA,EAGFA,EAAAA,OAAO,SAAA,EAAA,EAAA,UAAA,CAAA,GAAA,EAAA,EAAA,mBAAA,CAIN,SALT,EAKS,EAAA,EAAA,EAAA,WAAA,CADe,EAAA,OAAA,QAAA,CAAA,CAAA,IAAA,EAAA,EAAA,mBAAA,CAAA,GAAA,EAAA"}
|
|
@@ -7,7 +7,7 @@ var f = {
|
|
|
7
7
|
key: 0,
|
|
8
8
|
class: "t-card__title"
|
|
9
9
|
}, m = {
|
|
10
|
-
key:
|
|
10
|
+
key: 0,
|
|
11
11
|
class: "t-card__actions"
|
|
12
12
|
}, h = { class: "t-card__body" }, g = {
|
|
13
13
|
key: 1,
|
|
@@ -28,7 +28,7 @@ var f = {
|
|
|
28
28
|
]), y = e(() => !!_.title);
|
|
29
29
|
return (e, _) => (s(), t(l(a.as), { class: o(v.value) }, {
|
|
30
30
|
default: d(() => [
|
|
31
|
-
e.$slots.header || y.value || e.$slots.actions ? (s(), r("header", f, [c(e.$slots, "header", {}, () => [a.title ? (s(), r("span", p, u(a.title), 1)) : n("", !0), e.$slots.actions ? (s(), r("span", m, [c(e.$slots, "actions")])) : n("", !0)])
|
|
31
|
+
e.$slots.header || y.value || e.$slots.actions ? (s(), r("header", f, [c(e.$slots, "header", {}, () => [a.title ? (s(), r("span", p, u(a.title), 1)) : n("", !0)]), e.$slots.actions ? (s(), r("span", m, [c(e.$slots, "actions")])) : n("", !0)])) : n("", !0),
|
|
32
32
|
i("div", h, [c(e.$slots, "default")]),
|
|
33
33
|
e.$slots.footer ? (s(), r("footer", g, [c(e.$slots, "footer")])) : n("", !0)
|
|
34
34
|
]),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TCard.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../src/components/TCard.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport type { TCardVariant, TSize } from '../types/contracts';\n\nconst props = withDefaults(\n defineProps<{\n as?: string;\n variant?: TCardVariant;\n size?: TSize;\n title?: string;\n }>(),\n {\n as: 'section',\n variant: 'outline',\n size: 'md',\n title: undefined,\n },\n);\n\nconst classes = computed(() => [\n 't-card',\n `t-card--${props.variant}`,\n `t-card--${props.size}`,\n]);\n\nconst hasHeader = computed(() => !!props.title);\n</script>\n\n<template>\n <component\n :is=\"as\"\n :class=\"classes\"\n >\n <header\n v-if=\"$slots.header || hasHeader || $slots.actions\"\n class=\"t-card__header\"\n >\n <slot name=\"header\">\n <span\n v-if=\"title\"\n class=\"t-card__title\"\n >\n {{ title }}\n </span>\n
|
|
1
|
+
{"version":3,"file":"TCard.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../src/components/TCard.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport type { TCardVariant, TSize } from '../types/contracts';\n\nconst props = withDefaults(\n defineProps<{\n as?: string;\n variant?: TCardVariant;\n size?: TSize;\n title?: string;\n }>(),\n {\n as: 'section',\n variant: 'outline',\n size: 'md',\n title: undefined,\n },\n);\n\nconst classes = computed(() => [\n 't-card',\n `t-card--${props.variant}`,\n `t-card--${props.size}`,\n]);\n\nconst hasHeader = computed(() => !!props.title);\n</script>\n\n<template>\n <component\n :is=\"as\"\n :class=\"classes\"\n >\n <header\n v-if=\"$slots.header || hasHeader || $slots.actions\"\n class=\"t-card__header\"\n >\n <slot name=\"header\">\n <span\n v-if=\"title\"\n class=\"t-card__title\"\n >\n {{ title }}\n </span>\n </slot>\n <span\n v-if=\"$slots.actions\"\n class=\"t-card__actions\"\n >\n <slot name=\"actions\" />\n </span>\n </header>\n <div class=\"t-card__body\">\n <slot />\n </div>\n <footer\n v-if=\"$slots.footer\"\n class=\"t-card__footer\"\n >\n <slot name=\"footer\" />\n </footer>\n </component>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;EAIA,IAAM,IAAQ,GAeR,IAAU,QAAe;GAC7B;GACA,WAAW,EAAM;GACjB,WAAW,EAAM;EACnB,CAAC,GAEK,IAAY,QAAe,CAAC,CAAC,EAAM,KAAK;yBAI5C,EAgCY,EA/BL,EAAA,EAAE,GAAA,EACN,OAAK,EAAE,EAAA,KAAO,EAAA,GAAA;oBAoBN;IAjBDA,EAAAA,OAAO,UAAU,EAAA,SAAaA,EAAAA,OAAO,WAAA,EAAA,GAD7C,EAkBS,UAlBT,GAkBS,CAdP,EAOO,EAAA,QAAA,UAAA,CAAA,SAAA,CALG,EAAA,SAAA,EAAA,GADR,EAKO,QALP,GAKO,EADF,EAAA,KAAK,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,CAAA,GAIJA,EAAAA,OAAO,WAAA,EAAA,GADf,EAKO,QALP,GAKO,CADL,EAAuB,EAAA,QAAA,SAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA;IAG3B,EAEM,OAFN,GAEM,CADJ,EAAQ,EAAA,QAAA,SAAA,CAAA,CAAA;IAGFA,EAAAA,OAAO,UAAA,EAAA,GADf,EAKS,UALT,GAKS,CADP,EAAsB,EAAA,QAAA,QAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TDropdown.cjs","names":[],"sources":["../../src/components/TDropdown.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { createId, isActivationKey, isEscapeKey } from '@treeui/utils';\nimport { computed, nextTick, onBeforeUnmount, ref, toRef, useAttrs, watch } from 'vue';\nimport { useControllableOpen } from '../composables/useControllableOpen';\nimport type { TSize } from '../types/contracts';\n\ndefineOptions({\n inheritAttrs: false,\n});\n\nexport interface TDropdownItem {\n label: string;\n value: string;\n disabled?: boolean;\n}\n\nexport type TDropdownAlign = 'start' | 'end';\n\nconst props = withDefaults(\n defineProps<{\n items?: TDropdownItem[];\n open?: boolean;\n defaultOpen?: boolean;\n disabled?: boolean;\n size?: TSize;\n label?: string;\n align?: TDropdownAlign;\n }>(),\n {\n items: () => [],\n open: undefined,\n defaultOpen: false,\n disabled: false,\n size: 'md',\n label: '',\n align: 'start',\n },\n);\n\nconst emit = defineEmits<{\n select: [value: string];\n 'update:open': [value: boolean];\n 'open-change': [value: boolean];\n}>();\n\ndefineSlots<{\n trigger(props: { isOpen: boolean }): unknown;\n item(props: { item: TDropdownItem; index: number }): unknown;\n}>();\n\nconst attrs = useAttrs();\nconst menuId = createId('t-dropdown');\nconst rootRef = ref<HTMLElement | null>(null);\nconst triggerRef = ref<
|
|
1
|
+
{"version":3,"file":"TDropdown.cjs","names":[],"sources":["../../src/components/TDropdown.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { createId, focusFirst, isActivationKey, isEscapeKey } from '@treeui/utils';\nimport { computed, nextTick, onBeforeUnmount, ref, toRef, useAttrs, watch } from 'vue';\nimport { useControllableOpen } from '../composables/useControllableOpen';\nimport type { TSize } from '../types/contracts';\n\ndefineOptions({\n inheritAttrs: false,\n});\n\nexport interface TDropdownItem {\n label: string;\n value: string;\n disabled?: boolean;\n}\n\nexport type TDropdownAlign = 'start' | 'end';\n\nconst props = withDefaults(\n defineProps<{\n items?: TDropdownItem[];\n open?: boolean;\n defaultOpen?: boolean;\n disabled?: boolean;\n size?: TSize;\n label?: string;\n align?: TDropdownAlign;\n id?: string;\n }>(),\n {\n items: () => [],\n open: undefined,\n defaultOpen: false,\n disabled: false,\n size: 'md',\n label: '',\n align: 'start',\n id: undefined,\n },\n);\n\nconst emit = defineEmits<{\n select: [value: string];\n 'update:open': [value: boolean];\n 'open-change': [value: boolean];\n}>();\n\ndefineSlots<{\n trigger(props: { isOpen: boolean; menuId: string }): unknown;\n item(props: { item: TDropdownItem; index: number }): unknown;\n}>();\n\nconst attrs = useAttrs();\nconst menuId = props.id ?? createId('t-dropdown');\nconst rootRef = ref<HTMLElement | null>(null);\nconst triggerRef = ref<HTMLElement | null>(null);\nconst itemRefs = ref<Map<string, HTMLElement>>(new Map());\nconst focusedIndex = ref(-1);\n\nconst triggerAttrs = computed(() => {\n const { class: _class, style: _style, ...rest } = attrs;\n return rest;\n});\n\nconst { value: isOpen, setValue } = useControllableOpen(\n toRef(props, 'open'),\n props.defaultOpen,\n (value) => {\n emit('update:open', value);\n emit('open-change', value);\n },\n);\n\nconst rootClasses = computed(() => [\n 't-dropdown',\n `t-dropdown--${props.size}`,\n {\n 't-dropdown--align-end': props.align === 'end',\n 'is-disabled': props.disabled,\n 'is-open': isOpen.value,\n },\n attrs.class,\n]);\n\nconst rootStyle = computed(() => attrs.style);\n\nconst enabledItems = computed(() => props.items.filter((i) => !i.disabled));\n\nconst openMenu = () => {\n if (props.disabled) return;\n focusedIndex.value = enabledItems.value.length > 0\n ? props.items.indexOf(enabledItems.value[0])\n : 0;\n setValue(true);\n nextTick(() => focusItem(focusedIndex.value));\n};\n\nconst closeMenu = (restoreFocus = false) => {\n setValue(false);\n focusedIndex.value = -1;\n if (restoreFocus) {\n nextTick(() => {\n if (triggerRef.value) focusFirst(triggerRef.value);\n });\n }\n};\n\nconst toggleMenu = () => {\n if (props.disabled) return;\n if (isOpen.value) {\n closeMenu();\n } else {\n openMenu();\n }\n};\n\nconst selectItem = (item: TDropdownItem) => {\n if (item.disabled) return;\n emit('select', item.value);\n closeMenu(true);\n};\n\nconst focusItem = (index: number) => {\n const item = props.items[index];\n if (!item) return;\n const el = itemRefs.value.get(item.value);\n el?.focus();\n};\n\nconst setItemRef = (el: Element | null, value: string) => {\n if (el instanceof HTMLElement) {\n itemRefs.value.set(value, el);\n } else {\n itemRefs.value.delete(value);\n }\n};\n\nconst moveFocus = (direction: 1 | -1) => {\n let nextIndex = focusedIndex.value + direction;\n while (nextIndex >= 0 && nextIndex < props.items.length) {\n if (!props.items[nextIndex].disabled) {\n focusedIndex.value = nextIndex;\n focusItem(nextIndex);\n return;\n }\n nextIndex += direction;\n }\n};\n\nconst onTriggerKeydown = (event: KeyboardEvent) => {\n if (props.disabled) return;\n\n if (isEscapeKey(event) && isOpen.value) {\n event.preventDefault();\n closeMenu();\n return;\n }\n\n if (isActivationKey(event) || event.key === 'ArrowDown' || event.key === 'ArrowUp') {\n event.preventDefault();\n openMenu();\n }\n};\n\nconst onItemKeydown = (event: KeyboardEvent, item: TDropdownItem) => {\n if (isEscapeKey(event)) {\n event.preventDefault();\n closeMenu(true);\n return;\n }\n\n if (isActivationKey(event)) {\n event.preventDefault();\n selectItem(item);\n return;\n }\n\n switch (event.key) {\n case 'ArrowDown':\n event.preventDefault();\n moveFocus(1);\n break;\n case 'ArrowUp':\n event.preventDefault();\n moveFocus(-1);\n break;\n case 'Home':\n event.preventDefault();\n focusedIndex.value = enabledItems.value.length > 0\n ? props.items.indexOf(enabledItems.value[0])\n : 0;\n focusItem(focusedIndex.value);\n break;\n case 'End':\n event.preventDefault();\n focusedIndex.value = enabledItems.value.length > 0\n ? props.items.indexOf(enabledItems.value[enabledItems.value.length - 1])\n : props.items.length - 1;\n focusItem(focusedIndex.value);\n break;\n default:\n break;\n }\n};\n\nconst onDocumentPointerDown = (event: PointerEvent) => {\n if (!isOpen.value) return;\n const target = event.target;\n if (!(target instanceof Node)) return;\n if (rootRef.value?.contains(target)) return;\n closeMenu();\n};\n\nwatch(isOpen, (value) => {\n if (value) {\n document.addEventListener('pointerdown', onDocumentPointerDown);\n } else {\n document.removeEventListener('pointerdown', onDocumentPointerDown);\n }\n});\n\nonBeforeUnmount(() => {\n document.removeEventListener('pointerdown', onDocumentPointerDown);\n});\n</script>\n\n<template>\n <div\n ref=\"rootRef\"\n :class=\"rootClasses\"\n :style=\"rootStyle\"\n :data-state=\"isOpen ? 'open' : 'closed'\"\n >\n <span\n ref=\"triggerRef\"\n class=\"t-dropdown__trigger-wrapper\"\n @click=\"toggleMenu\"\n @keydown=\"onTriggerKeydown\"\n >\n <slot\n name=\"trigger\"\n :is-open=\"isOpen\"\n :menu-id=\"menuId\"\n >\n <button\n v-bind=\"triggerAttrs\"\n type=\"button\"\n class=\"t-dropdown__trigger\"\n :disabled=\"disabled\"\n :aria-controls=\"isOpen ? menuId : undefined\"\n aria-haspopup=\"menu\"\n :aria-expanded=\"isOpen\"\n >\n <span class=\"t-dropdown__label\">{{ label }}</span>\n <svg\n class=\"t-dropdown__chevron\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\"\n >\n <polyline points=\"4 6 8 10 12 6\" />\n </svg>\n </button>\n </slot>\n </span>\n <transition name=\"t-fade\">\n <ul\n v-if=\"isOpen && !disabled\"\n :id=\"menuId\"\n role=\"menu\"\n class=\"t-dropdown__menu\"\n :aria-label=\"label || undefined\"\n >\n <li\n v-for=\"(item, index) in items\"\n :key=\"item.value\"\n :ref=\"(el) => setItemRef(el as Element | null, item.value)\"\n role=\"menuitem\"\n class=\"t-dropdown__item\"\n :class=\"{\n 'is-disabled': item.disabled,\n 'is-focused': index === focusedIndex,\n }\"\n :aria-disabled=\"item.disabled || undefined\"\n :tabindex=\"item.disabled ? -1 : 0\"\n @click=\"selectItem(item)\"\n @keydown=\"onItemKeydown($event, item)\"\n >\n <slot\n name=\"item\"\n :item=\"item\"\n :index=\"index\"\n >\n {{ item.label }}\n </slot>\n </li>\n </ul>\n </transition>\n </div>\n</template>\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TDropdown.js","names":[],"sources":["../../src/components/TDropdown.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { createId, isActivationKey, isEscapeKey } from '@treeui/utils';\nimport { computed, nextTick, onBeforeUnmount, ref, toRef, useAttrs, watch } from 'vue';\nimport { useControllableOpen } from '../composables/useControllableOpen';\nimport type { TSize } from '../types/contracts';\n\ndefineOptions({\n inheritAttrs: false,\n});\n\nexport interface TDropdownItem {\n label: string;\n value: string;\n disabled?: boolean;\n}\n\nexport type TDropdownAlign = 'start' | 'end';\n\nconst props = withDefaults(\n defineProps<{\n items?: TDropdownItem[];\n open?: boolean;\n defaultOpen?: boolean;\n disabled?: boolean;\n size?: TSize;\n label?: string;\n align?: TDropdownAlign;\n }>(),\n {\n items: () => [],\n open: undefined,\n defaultOpen: false,\n disabled: false,\n size: 'md',\n label: '',\n align: 'start',\n },\n);\n\nconst emit = defineEmits<{\n select: [value: string];\n 'update:open': [value: boolean];\n 'open-change': [value: boolean];\n}>();\n\ndefineSlots<{\n trigger(props: { isOpen: boolean }): unknown;\n item(props: { item: TDropdownItem; index: number }): unknown;\n}>();\n\nconst attrs = useAttrs();\nconst menuId = createId('t-dropdown');\nconst rootRef = ref<HTMLElement | null>(null);\nconst triggerRef = ref<
|
|
1
|
+
{"version":3,"file":"TDropdown.js","names":[],"sources":["../../src/components/TDropdown.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { createId, focusFirst, isActivationKey, isEscapeKey } from '@treeui/utils';\nimport { computed, nextTick, onBeforeUnmount, ref, toRef, useAttrs, watch } from 'vue';\nimport { useControllableOpen } from '../composables/useControllableOpen';\nimport type { TSize } from '../types/contracts';\n\ndefineOptions({\n inheritAttrs: false,\n});\n\nexport interface TDropdownItem {\n label: string;\n value: string;\n disabled?: boolean;\n}\n\nexport type TDropdownAlign = 'start' | 'end';\n\nconst props = withDefaults(\n defineProps<{\n items?: TDropdownItem[];\n open?: boolean;\n defaultOpen?: boolean;\n disabled?: boolean;\n size?: TSize;\n label?: string;\n align?: TDropdownAlign;\n id?: string;\n }>(),\n {\n items: () => [],\n open: undefined,\n defaultOpen: false,\n disabled: false,\n size: 'md',\n label: '',\n align: 'start',\n id: undefined,\n },\n);\n\nconst emit = defineEmits<{\n select: [value: string];\n 'update:open': [value: boolean];\n 'open-change': [value: boolean];\n}>();\n\ndefineSlots<{\n trigger(props: { isOpen: boolean; menuId: string }): unknown;\n item(props: { item: TDropdownItem; index: number }): unknown;\n}>();\n\nconst attrs = useAttrs();\nconst menuId = props.id ?? createId('t-dropdown');\nconst rootRef = ref<HTMLElement | null>(null);\nconst triggerRef = ref<HTMLElement | null>(null);\nconst itemRefs = ref<Map<string, HTMLElement>>(new Map());\nconst focusedIndex = ref(-1);\n\nconst triggerAttrs = computed(() => {\n const { class: _class, style: _style, ...rest } = attrs;\n return rest;\n});\n\nconst { value: isOpen, setValue } = useControllableOpen(\n toRef(props, 'open'),\n props.defaultOpen,\n (value) => {\n emit('update:open', value);\n emit('open-change', value);\n },\n);\n\nconst rootClasses = computed(() => [\n 't-dropdown',\n `t-dropdown--${props.size}`,\n {\n 't-dropdown--align-end': props.align === 'end',\n 'is-disabled': props.disabled,\n 'is-open': isOpen.value,\n },\n attrs.class,\n]);\n\nconst rootStyle = computed(() => attrs.style);\n\nconst enabledItems = computed(() => props.items.filter((i) => !i.disabled));\n\nconst openMenu = () => {\n if (props.disabled) return;\n focusedIndex.value = enabledItems.value.length > 0\n ? props.items.indexOf(enabledItems.value[0])\n : 0;\n setValue(true);\n nextTick(() => focusItem(focusedIndex.value));\n};\n\nconst closeMenu = (restoreFocus = false) => {\n setValue(false);\n focusedIndex.value = -1;\n if (restoreFocus) {\n nextTick(() => {\n if (triggerRef.value) focusFirst(triggerRef.value);\n });\n }\n};\n\nconst toggleMenu = () => {\n if (props.disabled) return;\n if (isOpen.value) {\n closeMenu();\n } else {\n openMenu();\n }\n};\n\nconst selectItem = (item: TDropdownItem) => {\n if (item.disabled) return;\n emit('select', item.value);\n closeMenu(true);\n};\n\nconst focusItem = (index: number) => {\n const item = props.items[index];\n if (!item) return;\n const el = itemRefs.value.get(item.value);\n el?.focus();\n};\n\nconst setItemRef = (el: Element | null, value: string) => {\n if (el instanceof HTMLElement) {\n itemRefs.value.set(value, el);\n } else {\n itemRefs.value.delete(value);\n }\n};\n\nconst moveFocus = (direction: 1 | -1) => {\n let nextIndex = focusedIndex.value + direction;\n while (nextIndex >= 0 && nextIndex < props.items.length) {\n if (!props.items[nextIndex].disabled) {\n focusedIndex.value = nextIndex;\n focusItem(nextIndex);\n return;\n }\n nextIndex += direction;\n }\n};\n\nconst onTriggerKeydown = (event: KeyboardEvent) => {\n if (props.disabled) return;\n\n if (isEscapeKey(event) && isOpen.value) {\n event.preventDefault();\n closeMenu();\n return;\n }\n\n if (isActivationKey(event) || event.key === 'ArrowDown' || event.key === 'ArrowUp') {\n event.preventDefault();\n openMenu();\n }\n};\n\nconst onItemKeydown = (event: KeyboardEvent, item: TDropdownItem) => {\n if (isEscapeKey(event)) {\n event.preventDefault();\n closeMenu(true);\n return;\n }\n\n if (isActivationKey(event)) {\n event.preventDefault();\n selectItem(item);\n return;\n }\n\n switch (event.key) {\n case 'ArrowDown':\n event.preventDefault();\n moveFocus(1);\n break;\n case 'ArrowUp':\n event.preventDefault();\n moveFocus(-1);\n break;\n case 'Home':\n event.preventDefault();\n focusedIndex.value = enabledItems.value.length > 0\n ? props.items.indexOf(enabledItems.value[0])\n : 0;\n focusItem(focusedIndex.value);\n break;\n case 'End':\n event.preventDefault();\n focusedIndex.value = enabledItems.value.length > 0\n ? props.items.indexOf(enabledItems.value[enabledItems.value.length - 1])\n : props.items.length - 1;\n focusItem(focusedIndex.value);\n break;\n default:\n break;\n }\n};\n\nconst onDocumentPointerDown = (event: PointerEvent) => {\n if (!isOpen.value) return;\n const target = event.target;\n if (!(target instanceof Node)) return;\n if (rootRef.value?.contains(target)) return;\n closeMenu();\n};\n\nwatch(isOpen, (value) => {\n if (value) {\n document.addEventListener('pointerdown', onDocumentPointerDown);\n } else {\n document.removeEventListener('pointerdown', onDocumentPointerDown);\n }\n});\n\nonBeforeUnmount(() => {\n document.removeEventListener('pointerdown', onDocumentPointerDown);\n});\n</script>\n\n<template>\n <div\n ref=\"rootRef\"\n :class=\"rootClasses\"\n :style=\"rootStyle\"\n :data-state=\"isOpen ? 'open' : 'closed'\"\n >\n <span\n ref=\"triggerRef\"\n class=\"t-dropdown__trigger-wrapper\"\n @click=\"toggleMenu\"\n @keydown=\"onTriggerKeydown\"\n >\n <slot\n name=\"trigger\"\n :is-open=\"isOpen\"\n :menu-id=\"menuId\"\n >\n <button\n v-bind=\"triggerAttrs\"\n type=\"button\"\n class=\"t-dropdown__trigger\"\n :disabled=\"disabled\"\n :aria-controls=\"isOpen ? menuId : undefined\"\n aria-haspopup=\"menu\"\n :aria-expanded=\"isOpen\"\n >\n <span class=\"t-dropdown__label\">{{ label }}</span>\n <svg\n class=\"t-dropdown__chevron\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\"\n >\n <polyline points=\"4 6 8 10 12 6\" />\n </svg>\n </button>\n </slot>\n </span>\n <transition name=\"t-fade\">\n <ul\n v-if=\"isOpen && !disabled\"\n :id=\"menuId\"\n role=\"menu\"\n class=\"t-dropdown__menu\"\n :aria-label=\"label || undefined\"\n >\n <li\n v-for=\"(item, index) in items\"\n :key=\"item.value\"\n :ref=\"(el) => setItemRef(el as Element | null, item.value)\"\n role=\"menuitem\"\n class=\"t-dropdown__item\"\n :class=\"{\n 'is-disabled': item.disabled,\n 'is-focused': index === focusedIndex,\n }\"\n :aria-disabled=\"item.disabled || undefined\"\n :tabindex=\"item.disabled ? -1 : 0\"\n @click=\"selectItem(item)\"\n @keydown=\"onItemKeydown($event, item)\"\n >\n <slot\n name=\"item\"\n :item=\"item\"\n :index=\"index\"\n >\n {{ item.label }}\n </slot>\n </li>\n </ul>\n </transition>\n </div>\n</template>\n"],"mappings":""}
|
|
@@ -13,12 +13,14 @@ type __VLS_Props = {
|
|
|
13
13
|
size?: TSize;
|
|
14
14
|
label?: string;
|
|
15
15
|
align?: TDropdownAlign;
|
|
16
|
+
id?: string;
|
|
16
17
|
};
|
|
17
18
|
declare function __VLS_template(): {
|
|
18
19
|
attrs: Partial<{}>;
|
|
19
20
|
slots: Readonly<{
|
|
20
21
|
trigger(props: {
|
|
21
22
|
isOpen: boolean;
|
|
23
|
+
menuId: string;
|
|
22
24
|
}): unknown;
|
|
23
25
|
item(props: {
|
|
24
26
|
item: TDropdownItem;
|
|
@@ -27,6 +29,7 @@ declare function __VLS_template(): {
|
|
|
27
29
|
}> & {
|
|
28
30
|
trigger(props: {
|
|
29
31
|
isOpen: boolean;
|
|
32
|
+
menuId: string;
|
|
30
33
|
}): unknown;
|
|
31
34
|
item(props: {
|
|
32
35
|
item: TDropdownItem;
|
|
@@ -35,7 +38,7 @@ declare function __VLS_template(): {
|
|
|
35
38
|
};
|
|
36
39
|
refs: {
|
|
37
40
|
rootRef: HTMLDivElement;
|
|
38
|
-
triggerRef:
|
|
41
|
+
triggerRef: HTMLSpanElement;
|
|
39
42
|
};
|
|
40
43
|
rootEl: any;
|
|
41
44
|
};
|
|
@@ -52,13 +55,14 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}
|
|
|
52
55
|
disabled: boolean;
|
|
53
56
|
size: TSize;
|
|
54
57
|
label: string;
|
|
58
|
+
id: string;
|
|
55
59
|
align: TDropdownAlign;
|
|
56
60
|
open: boolean;
|
|
57
61
|
defaultOpen: boolean;
|
|
58
62
|
items: TDropdownItem[];
|
|
59
63
|
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
|
|
60
64
|
rootRef: HTMLDivElement;
|
|
61
|
-
triggerRef:
|
|
65
|
+
triggerRef: HTMLSpanElement;
|
|
62
66
|
}, any>;
|
|
63
67
|
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
|
|
64
68
|
export default _default;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TDropdown.vue.d.ts","sourceRoot":"","sources":["../../src/components/TDropdown.vue"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"TDropdown.vue.d.ts","sourceRoot":"","sources":["../../src/components/TDropdown.vue"],"names":[],"mappings":"AAqTA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAMhD,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,KAAK,CAAC;AAE7C,KAAK,WAAW,GAAG;IACf,KAAK,CAAC,EAAE,aAAa,EAAE,CAAC;IACxB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb,CAAC;AAoNJ,iBAAS,cAAc;WA+GT,OAAO,IAA6B;;uBA5SjC;YAAE,MAAM,EAAE,OAAO,CAAC;YAAC,MAAM,EAAE,MAAM,CAAA;SAAE,GAAG,OAAO;oBAChD;YAAE,IAAI,EAAE,aAAa,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE,GAAG,OAAO;;uBAD7C;YAAE,MAAM,EAAE,OAAO,CAAC;YAAC,MAAM,EAAE,MAAM,CAAA;SAAE,GAAG,OAAO;oBAChD;YAAE,IAAI,EAAE,aAAa,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE,GAAG,OAAO;;;;;;;EAgT7D;AAuBD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;;;;cArWN,OAAO;UACX,KAAK;WACJ,MAAM;QAET,MAAM;WADH,cAAc;UALf,OAAO;iBACA,OAAO;WAFb,aAAa,EAAE;;;;OAiXzB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAapG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
const e=require("../composables/useControllableOpen.cjs");let t=require("vue"),n=require("@treeui/utils");var r=[`data-state`],i=
|
|
1
|
+
const e=require("../composables/useControllableOpen.cjs");let t=require("vue"),n=require("@treeui/utils");var r=[`data-state`],i=[`disabled`,`aria-controls`,`aria-expanded`],a={class:`t-dropdown__label`},o=[`id`,`aria-label`],s=[`aria-disabled`,`tabindex`,`onClick`,`onKeydown`],c=(0,t.defineComponent)({inheritAttrs:!1,__name:`TDropdown`,props:{items:{default:()=>[]},open:{type:Boolean,default:void 0},defaultOpen:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},size:{default:`md`},label:{default:``},align:{default:`start`},id:{default:void 0}},emits:[`select`,`update:open`,`open-change`],setup(c,{emit:l}){let u=c,d=l,f=(0,t.useAttrs)(),p=u.id??(0,n.createId)(`t-dropdown`),m=(0,t.ref)(null),h=(0,t.ref)(null),g=(0,t.ref)(new Map),_=(0,t.ref)(-1),v=(0,t.computed)(()=>{let{class:e,style:t,...n}=f;return n}),{value:y,setValue:b}=e.useControllableOpen((0,t.toRef)(u,`open`),u.defaultOpen,e=>{d(`update:open`,e),d(`open-change`,e)}),x=(0,t.computed)(()=>[`t-dropdown`,`t-dropdown--${u.size}`,{"t-dropdown--align-end":u.align===`end`,"is-disabled":u.disabled,"is-open":y.value},f.class]),S=(0,t.computed)(()=>f.style),C=(0,t.computed)(()=>u.items.filter(e=>!e.disabled)),w=()=>{u.disabled||(_.value=C.value.length>0?u.items.indexOf(C.value[0]):0,b(!0),(0,t.nextTick)(()=>O(_.value)))},T=(e=!1)=>{b(!1),_.value=-1,e&&(0,t.nextTick)(()=>{h.value&&(0,n.focusFirst)(h.value)})},E=()=>{u.disabled||(y.value?T():w())},D=e=>{e.disabled||(d(`select`,e.value),T(!0))},O=e=>{let t=u.items[e];t&&g.value.get(t.value)?.focus()},k=(e,t)=>{e instanceof HTMLElement?g.value.set(t,e):g.value.delete(t)},A=e=>{let t=_.value+e;for(;t>=0&&t<u.items.length;){if(!u.items[t].disabled){_.value=t,O(t);return}t+=e}},j=e=>{if(!u.disabled){if((0,n.isEscapeKey)(e)&&y.value){e.preventDefault(),T();return}((0,n.isActivationKey)(e)||e.key===`ArrowDown`||e.key===`ArrowUp`)&&(e.preventDefault(),w())}},M=(e,t)=>{if((0,n.isEscapeKey)(e)){e.preventDefault(),T(!0);return}if((0,n.isActivationKey)(e)){e.preventDefault(),D(t);return}switch(e.key){case`ArrowDown`:e.preventDefault(),A(1);break;case`ArrowUp`:e.preventDefault(),A(-1);break;case`Home`:e.preventDefault(),_.value=C.value.length>0?u.items.indexOf(C.value[0]):0,O(_.value);break;case`End`:e.preventDefault(),_.value=C.value.length>0?u.items.indexOf(C.value[C.value.length-1]):u.items.length-1,O(_.value);break;default:break}},N=e=>{if(!y.value)return;let t=e.target;t instanceof Node&&(m.value?.contains(t)||T())};return(0,t.watch)(y,e=>{e?document.addEventListener(`pointerdown`,N):document.removeEventListener(`pointerdown`,N)}),(0,t.onBeforeUnmount)(()=>{document.removeEventListener(`pointerdown`,N)}),(e,n)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{ref_key:`rootRef`,ref:m,class:(0,t.normalizeClass)(x.value),style:(0,t.normalizeStyle)(S.value),"data-state":(0,t.unref)(y)?`open`:`closed`},[(0,t.createElementVNode)(`span`,{ref_key:`triggerRef`,ref:h,class:`t-dropdown__trigger-wrapper`,onClick:E,onKeydown:j},[(0,t.renderSlot)(e.$slots,`trigger`,{isOpen:(0,t.unref)(y),menuId:(0,t.unref)(p)},()=>[(0,t.createElementVNode)(`button`,(0,t.mergeProps)(v.value,{type:`button`,class:`t-dropdown__trigger`,disabled:c.disabled,"aria-controls":(0,t.unref)(y)?(0,t.unref)(p):void 0,"aria-haspopup":`menu`,"aria-expanded":(0,t.unref)(y)}),[(0,t.createElementVNode)(`span`,a,(0,t.toDisplayString)(c.label),1),n[0]||=(0,t.createElementVNode)(`svg`,{class:`t-dropdown__chevron`,viewBox:`0 0 16 16`,fill:`none`,stroke:`currentColor`,"stroke-width":`2`,"stroke-linecap":`round`,"stroke-linejoin":`round`,"aria-hidden":`true`},[(0,t.createElementVNode)(`polyline`,{points:`4 6 8 10 12 6`})],-1)],16,i)])],544),(0,t.createVNode)(t.Transition,{name:`t-fade`},{default:(0,t.withCtx)(()=>[(0,t.unref)(y)&&!c.disabled?((0,t.openBlock)(),(0,t.createElementBlock)(`ul`,{key:0,id:(0,t.unref)(p),role:`menu`,class:`t-dropdown__menu`,"aria-label":c.label||void 0},[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(c.items,(n,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`li`,{key:n.value,ref_for:!0,ref:e=>k(e,n.value),role:`menuitem`,class:(0,t.normalizeClass)([`t-dropdown__item`,{"is-disabled":n.disabled,"is-focused":r===_.value}]),"aria-disabled":n.disabled||void 0,tabindex:n.disabled?-1:0,onClick:e=>D(n),onKeydown:e=>M(e,n)},[(0,t.renderSlot)(e.$slots,`item`,{item:n,index:r},()=>[(0,t.createTextVNode)((0,t.toDisplayString)(n.label),1)])],42,s))),128))],8,o)):(0,t.createCommentVNode)(``,!0)]),_:3})],14,r))}});exports.default=c;
|
|
2
2
|
//# sourceMappingURL=TDropdown.vue_vue_type_script_setup_true_lang.cjs.map
|