npm - @rotki/ui-library - Versions diffs - 3.0.0-beta.3 → 3.0.0-beta.5 - Mend

@rotki/ui-library 3.0.0-beta.3 → 3.0.0-beta.5

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.

Files changed (248) hide show

package/dist/components/forms/slider/RuiSlider.vue_vue_type_script_setup_true_lang.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RuiSlider.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../../src/components/forms/slider/RuiSlider.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { VueClassValue } from '@/types/class-value';\nimport RuiFieldLabel from '@/components/forms/field-label/RuiFieldLabel.vue';\nimport RuiSliderTicks from '@/components/forms/slider/RuiSliderTicks.vue';\nimport { HIGHLIGHT_COLOR_MAP, HIGHLIGHT_DEFAULT, SliderInteraction, sliderStyles } from '@/components/forms/slider/slider-styles';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport { useFormTextDetail } from '@/utils/form-text-detail';\nimport { getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\nimport { cn } from '@/utils/tv';\n\nexport interface RuiSliderClassNames {\n root?: VueClassValue;\n slider?: VueClassValue;\n tick?: VueClassValue;\n}\n\nexport interface Props {\n min?: number;\n max?: number;\n step?: number;\n disabled?: boolean;\n showThumbLabel?: boolean;\n showTicks?: boolean;\n hideTrack?: boolean;\n tickSize?: number;\n vertical?: boolean;\n color?: ContextColorsType;\n label?: string;\n hint?: string;\n errorMessages?: string \| string[];\n successMessages?: string \| string[];\n hideDetails?: boolean;\n classNames?: RuiSliderClassNames;\n required?: boolean;\n}\n\ndefineOptions({\n name: 'RuiSlider',\n inheritAttrs: false,\n});\n\nconst modelValue = defineModel<number>({ default: 0 });\n\nconst {\n min = 0,\n max = 100,\n step = 1,\n disabled = false,\n showThumbLabel = false,\n showTicks = false,\n hideTrack = false,\n vertical = false,\n tickSize = 2,\n color = 'primary',\n label = '',\n hint = '',\n errorMessages = [],\n successMessages = [],\n hideDetails = false,\n classNames,\n required = false,\n} = defineProps<Props>();\n\nconst BIG_TICK_THRESHOLD = 4;\n\nconst isHovered = ref<boolean>(false);\nconst isFocused = ref<boolean>(false);\nconst isActive = ref<boolean>(false);\n\nconst outer = useTemplateRef<HTMLDivElement>('outer');\n\nconst generatedId = useId();\nconst attrs = useAttrs();\n\nconst { hasError } = useFormTextDetail(\n () => errorMessages,\n () => successMessages,\n);\n\n// the label above points at the range input, keeping a consumer's own id\nconst inputId = computed<string>(() => {\n const id = attrs.id;\n return typeof id === 'string' && id ? id : generatedId;\n});\n\nconst { width, height } = useElementBounding(outer);\n\nconst bigTick = computed<boolean>(() => tickSize > BIG_TICK_THRESHOLD);\n\nuseEventListener(document, 'mouseup', () => set(isActive, false));\n\nconst interaction = computed<SliderInteraction>(() => {\n if (disabled)\n return SliderInteraction.idle;\n if (get(isActive))\n return SliderInteraction.active;\n if (get(isFocused))\n return SliderInteraction.focus;\n if (get(isHovered))\n return SliderInteraction.hover;\n return SliderInteraction.idle;\n});\n\n// Layout ui: stable props only (not interaction), used for wrapper/label/outer/inner/input\nconst ui = computed<ReturnType<typeof sliderStyles>>(() => sliderStyles({\n disabled,\n vertical,\n color,\n bigTick: get(bigTick),\n hasLabel: !!label,\n}));\n\n// Track ui: includes interaction state, used for slider/thumb/ticks (changes on hover/focus/active)\nconst trackUi = computed<ReturnType<typeof sliderStyles>>(() => sliderStyles({\n disabled,\n vertical,\n interaction: get(interaction),\n color,\n bigTick: get(bigTick),\n}));\n\nconst totalTicks = computed<number>(() => (max - min) / step);\n\nconst currentTick = computed<number>(() => Math.round((get(modelValue) - min) / step));\n\nconst trackWidth = computed<string>(() => {\n const percentage = Math.min(100, Math.max(0, Math.round((get(currentTick) / get(totalTicks)) * 100)));\n return `${percentage}%`;\n});\n\nconst innerStyle = computed<Record<string, string>>(() => {\n const w = `${get(width)}px`;\n const h = `${get(height)}px`;\n const style: Record<string, string> = { width: vertical ? h : w, height: vertical ? w : h };\n if (vertical) {\n style['transform-origin'] = '0 0';\n style['--rui-slider-shift'] = h;\n }\n return style;\n});\n\nconst tickSizePx = computed<string>(() => `${tickSize}px`);\n\nconst ticksStyle = computed<Record<string, string>>(() => {\n const size = get(tickSizePx);\n return { margin: `0 calc(${size} / -2)`, width: `calc(100% + ${size})` };\n});\n\nconst tickStyle = computed<Record<string, string>>(() => {\n const size = get(tickSizePx);\n return { width: size, height: size };\n});\n\nconst highlightClass = computed<string>(() => get(bigTick) ? HIGHLIGHT_COLOR_MAP[color] : HIGHLIGHT_DEFAULT);\n\nconst tickClassOverride = computed<string \| undefined>(() => cn(classNames?.tick));\n\nfunction isHighlightedTick(index: number): boolean {\n return index <= get(currentTick);\n}\n</script>\n\n<template>\n <div\n v-bind=\"getRootAttrs($attrs)\"\n :class=\"ui.root()\"\n >\n <!-- above the rail like any field's label, neutral in every state; the messages below carry the validation -->\n <RuiFieldLabel\n v-if=\"label\"\n :text=\"label\"\n :for=\"inputId\"\n :required=\"required\"\n :disabled=\"disabled\"\n :class=\"ui.label()\"\n />\n <div\n :class=\"ui.wrapper()\"\n :data-error=\"hasError ? '' : undefined\"\n data-id=\"slider-wrapper\"\n >\n <div\n ref=\"outer\"\n :class=\"ui.outer()\"\n >\n <div\n :class=\"ui.inner()\"\n :style=\"innerStyle\"\n >\n <input\n :id=\"inputId\"\n v-model.number=\"modelValue\"\n :class=\"ui.input()\"\n type=\"range\"\n :max=\"max\"\n :min=\"min\"\n :step=\"step\"\n :disabled=\"disabled\"\n :aria-invalid=\"hasError\"\n :aria-label=\"label \|\| undefined\"\n :aria-valuetext=\"String(modelValue)\"\n v-bind=\"getNonRootAttrs($attrs, ['class', 'id'])\"\n @mouseenter=\"isHovered = true\"\n @mouseleave=\"isHovered = false\"\n @focus=\"isFocused = true\"\n @blur=\"isFocused = false\"\n @mousedown=\"isActive = true\"\n @mouseup=\"isActive = false\"\n />\n <div :class=\"trackUi.slider()\">\n <div :class=\"trackUi.sliderInner()\">\n <div :class=\"trackUi.container({ class: cn(classNames?.slider) })\">\n <div\n v-if=\"!hideTrack\"\n :class=\"trackUi.track()\"\n :style=\"{ width: trackWidth }\"\n data-id=\"slider-track\"\n />\n <RuiSliderTicks\n v-if=\"showTicks && !disabled\"\n :count=\"totalTicks\"\n :container-class=\"trackUi.ticks()\"\n :container-style=\"ticksStyle\"\n :tick-class=\"trackUi.tick()\"\n :tick-style=\"tickStyle\"\n :hide-track=\"hideTrack\"\n :highlight-class=\"highlightClass\"\n :tick-class-override=\"tickClassOverride\"\n :is-highlighted=\"isHighlightedTick\"\n />\n </div>\n <div\n :class=\"trackUi.thumb()\"\n :style=\"{ left: trackWidth }\"\n data-id=\"slider-thumb\"\n />\n <div\n v-if=\"showThumbLabel && !disabled\"\n :class=\"trackUi.thumbLabel()\"\n :style=\"{ left: trackWidth }\"\n data-id=\"slider-thumb-label\"\n >\n {{ modelValue }}\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <RuiFormTextDetail\n v-if=\"!hideDetails\"\n class=\"pt-1\"\n :error-messages=\"errorMessages\"\n :success-messages=\"successMessages\"\n :hint=\"hint\"\n />\n </div>\n</template>\n"],"mappings":"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"}
1	+ {"version":3,"file":"RuiSlider.vue_vue_type_script_setup_true_lang.js","names":["$attrs","_useModel","_openBlock","_createElementBlock","_mergeProps","_unref","_createBlock","RuiFieldLabel","_normalizeClass","_createCommentVNode","_createElementVNode","_normalizeStyle","_withDirectives","_vModelText","RuiSliderTicks","_toDisplayString","RuiFormTextDetail"],"sources":["../../../../src/components/forms/slider/RuiSlider.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { VueClassValue } from '@/types/class-value';\nimport RuiFieldLabel from '@/components/forms/field-label/RuiFieldLabel.vue';\nimport RuiSliderTicks from '@/components/forms/slider/RuiSliderTicks.vue';\nimport { HIGHLIGHT_COLOR_MAP, HIGHLIGHT_DEFAULT, SliderInteraction, sliderStyles } from '@/components/forms/slider/slider-styles';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport { useFormTextDetail } from '@/utils/form-text-detail';\nimport { getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\nimport { cn } from '@/utils/tv';\n\nexport interface RuiSliderClassNames {\n root?: VueClassValue;\n slider?: VueClassValue;\n tick?: VueClassValue;\n}\n\nexport interface Props {\n min?: number;\n max?: number;\n step?: number;\n disabled?: boolean;\n showThumbLabel?: boolean;\n showTicks?: boolean;\n hideTrack?: boolean;\n tickSize?: number;\n vertical?: boolean;\n color?: ContextColorsType;\n label?: string;\n hint?: string;\n errorMessages?: string \| string[];\n successMessages?: string \| string[];\n hideDetails?: boolean;\n classNames?: RuiSliderClassNames;\n required?: boolean;\n}\n\ndefineOptions({\n name: 'RuiSlider',\n inheritAttrs: false,\n});\n\nconst modelValue = defineModel<number>({ default: 0 });\n\nconst {\n min = 0,\n max = 100,\n step = 1,\n disabled = false,\n showThumbLabel = false,\n showTicks = false,\n hideTrack = false,\n vertical = false,\n tickSize = 2,\n color = 'primary',\n label = '',\n hint = '',\n errorMessages = [],\n successMessages = [],\n hideDetails = false,\n classNames,\n required = false,\n} = defineProps<Props>();\n\nconst BIG_TICK_THRESHOLD = 4;\n\nconst isHovered = ref<boolean>(false);\nconst isFocused = ref<boolean>(false);\nconst isActive = ref<boolean>(false);\n\nconst outer = useTemplateRef<HTMLDivElement>('outer');\n\nconst generatedId = useId();\nconst attrs = useAttrs();\n\nconst { hasError } = useFormTextDetail(\n () => errorMessages,\n () => successMessages,\n);\n\n// the label above points at the range input, keeping a consumer's own id\nconst inputId = computed<string>(() => {\n const id = attrs.id;\n return typeof id === 'string' && id ? id : generatedId;\n});\n\nconst { width, height } = useElementBounding(outer);\n\nconst bigTick = computed<boolean>(() => tickSize > BIG_TICK_THRESHOLD);\n\nuseEventListener(document, 'mouseup', () => set(isActive, false));\n\nconst interaction = computed<SliderInteraction>(() => {\n if (disabled)\n return SliderInteraction.idle;\n if (get(isActive))\n return SliderInteraction.active;\n if (get(isFocused))\n return SliderInteraction.focus;\n if (get(isHovered))\n return SliderInteraction.hover;\n return SliderInteraction.idle;\n});\n\n// Layout ui: stable props only (not interaction), used for wrapper/label/outer/inner/input\nconst ui = computed<ReturnType<typeof sliderStyles>>(() => sliderStyles({\n disabled,\n vertical,\n color,\n bigTick: get(bigTick),\n hasLabel: !!label,\n}));\n\n// Track ui: includes interaction state, used for slider/thumb/ticks (changes on hover/focus/active)\nconst trackUi = computed<ReturnType<typeof sliderStyles>>(() => sliderStyles({\n disabled,\n vertical,\n interaction: get(interaction),\n color,\n bigTick: get(bigTick),\n}));\n\nconst totalTicks = computed<number>(() => (max - min) / step);\n\nconst currentTick = computed<number>(() => Math.round((get(modelValue) - min) / step));\n\nconst trackWidth = computed<string>(() => {\n const percentage = Math.min(100, Math.max(0, Math.round((get(currentTick) / get(totalTicks)) * 100)));\n return `${percentage}%`;\n});\n\nconst innerStyle = computed<Record<string, string>>(() => {\n const w = `${get(width)}px`;\n const h = `${get(height)}px`;\n const style: Record<string, string> = { width: vertical ? h : w, height: vertical ? w : h };\n if (vertical) {\n style['transform-origin'] = '0 0';\n style['--rui-slider-shift'] = h;\n }\n return style;\n});\n\nconst tickSizePx = computed<string>(() => `${tickSize}px`);\n\nconst ticksStyle = computed<Record<string, string>>(() => {\n const size = get(tickSizePx);\n return { margin: `0 calc(${size} / -2)`, width: `calc(100% + ${size})` };\n});\n\nconst tickStyle = computed<Record<string, string>>(() => {\n const size = get(tickSizePx);\n return { width: size, height: size };\n});\n\nconst highlightClass = computed<string>(() => get(bigTick) ? HIGHLIGHT_COLOR_MAP[color] : HIGHLIGHT_DEFAULT);\n\nconst tickClassOverride = computed<string \| undefined>(() => cn(classNames?.tick));\n\nfunction isHighlightedTick(index: number): boolean {\n return index <= get(currentTick);\n}\n</script>\n\n<template>\n <div\n v-bind=\"getRootAttrs($attrs)\"\n :class=\"ui.root()\"\n >\n <!-- above the rail like any field's label, neutral in every state; the messages below carry the validation -->\n <RuiFieldLabel\n v-if=\"label\"\n :text=\"label\"\n :for=\"inputId\"\n :required=\"required\"\n :disabled=\"disabled\"\n :class=\"ui.label()\"\n />\n <div\n :class=\"ui.wrapper()\"\n :data-error=\"hasError ? '' : undefined\"\n data-id=\"slider-wrapper\"\n >\n <div\n ref=\"outer\"\n :class=\"ui.outer()\"\n >\n <div\n :class=\"ui.inner()\"\n :style=\"innerStyle\"\n >\n <input\n :id=\"inputId\"\n v-model.number=\"modelValue\"\n :class=\"ui.input()\"\n type=\"range\"\n :max=\"max\"\n :min=\"min\"\n :step=\"step\"\n :disabled=\"disabled\"\n :aria-invalid=\"hasError\"\n :aria-label=\"label \|\| undefined\"\n :aria-valuetext=\"String(modelValue)\"\n v-bind=\"getNonRootAttrs($attrs, ['class', 'id'])\"\n @mouseenter=\"isHovered = true\"\n @mouseleave=\"isHovered = false\"\n @focus=\"isFocused = true\"\n @blur=\"isFocused = false\"\n @mousedown=\"isActive = true\"\n @mouseup=\"isActive = false\"\n />\n <div :class=\"trackUi.slider()\">\n <div :class=\"trackUi.sliderInner()\">\n <div :class=\"trackUi.container({ class: cn(classNames?.slider) })\">\n <div\n v-if=\"!hideTrack\"\n :class=\"trackUi.track()\"\n :style=\"{ width: trackWidth }\"\n data-id=\"slider-track\"\n />\n <RuiSliderTicks\n v-if=\"showTicks && !disabled\"\n :count=\"totalTicks\"\n :container-class=\"trackUi.ticks()\"\n :container-style=\"ticksStyle\"\n :tick-class=\"trackUi.tick()\"\n :tick-style=\"tickStyle\"\n :hide-track=\"hideTrack\"\n :highlight-class=\"highlightClass\"\n :tick-class-override=\"tickClassOverride\"\n :is-highlighted=\"isHighlightedTick\"\n />\n </div>\n <div\n :class=\"trackUi.thumb()\"\n :style=\"{ left: trackWidth }\"\n data-id=\"slider-thumb\"\n />\n <div\n v-if=\"showThumbLabel && !disabled\"\n :class=\"trackUi.thumbLabel()\"\n :style=\"{ left: trackWidth }\"\n data-id=\"slider-thumb-label\"\n >\n {{ modelValue }}\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <RuiFormTextDetail\n v-if=\"!hideDetails\"\n class=\"pt-1\"\n :error-messages=\"errorMessages\"\n :success-messages=\"successMessages\"\n :hint=\"hint\"\n />\n </div>\n</template>\n"],"mappings":"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"}

package/dist/components/forms/slider/RuiSliderTicks.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RuiSliderTicks.js","names":[],"sources":["../../../../src/components/forms/slider/RuiSliderTicks.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { StyleValue } from 'vue';\n\nexport interface SliderTicksProps {\n count: number;\n containerClass: string;\n containerStyle: StyleValue;\n tickClass: string;\n tickStyle: StyleValue;\n hideTrack: boolean;\n highlightClass: string;\n tickClassOverride: string \| undefined;\n isHighlighted: (index: number) => boolean;\n}\n\nconst {\n containerClass,\n containerStyle,\n count,\n hideTrack,\n highlightClass,\n isHighlighted,\n tickClass,\n tickClassOverride,\n tickStyle,\n} = defineProps<SliderTicksProps>();\n\n/*\n A track-less slider paints every tick the same way; with a track, the ticks\n * up to the current value are highlighted and the rest keep the override.\n */\nfunction classesFor(index: number): (string \| undefined \| false)[] {\n if (hideTrack)\n return [tickClass, tickClassOverride];\n\n return [\n tickClass,\n isHighlighted(index) && highlightClass,\n !isHighlighted(index) && tickClassOverride,\n ];\n}\n</script>\n\n<template>\n <div\n :class=\"containerClass\"\n :style=\"containerStyle\"\n data-id=\"slider-ticks\"\n >\n <span\n v-for=\"i in count + 1\"\n :key=\"i\"\n :class=\"classesFor(i - 1)\"\n :style=\"tickStyle\"\n />\n </div>\n</template>\n"],"mappings":""}
1	+ {"version":3,"file":"RuiSliderTicks.js","names":["_sfc_main"],"sources":["../../../../src/components/forms/slider/RuiSliderTicks.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { StyleValue } from 'vue';\n\nexport interface SliderTicksProps {\n count: number;\n containerClass: string;\n containerStyle: StyleValue;\n tickClass: string;\n tickStyle: StyleValue;\n hideTrack: boolean;\n highlightClass: string;\n tickClassOverride: string \| undefined;\n isHighlighted: (index: number) => boolean;\n}\n\nconst {\n containerClass,\n containerStyle,\n count,\n hideTrack,\n highlightClass,\n isHighlighted,\n tickClass,\n tickClassOverride,\n tickStyle,\n} = defineProps<SliderTicksProps>();\n\n/*\n A track-less slider paints every tick the same way; with a track, the ticks\n * up to the current value are highlighted and the rest keep the override.\n */\nfunction classesFor(index: number): (string \| undefined \| false)[] {\n if (hideTrack)\n return [tickClass, tickClassOverride];\n\n return [\n tickClass,\n isHighlighted(index) && highlightClass,\n !isHighlighted(index) && tickClassOverride,\n ];\n}\n</script>\n\n<template>\n <div\n :class=\"containerClass\"\n :style=\"containerStyle\"\n data-id=\"slider-ticks\"\n >\n <span\n v-for=\"i in count + 1\"\n :key=\"i\"\n :class=\"classesFor(i - 1)\"\n :style=\"tickStyle\"\n />\n </div>\n</template>\n"],"mappings":""}

package/dist/components/forms/slider/RuiSliderTicks.vue_vue_type_script_setup_true_lang.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RuiSliderTicks.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../src/components/forms/slider/RuiSliderTicks.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { StyleValue } from 'vue';\n\nexport interface SliderTicksProps {\n count: number;\n containerClass: string;\n containerStyle: StyleValue;\n tickClass: string;\n tickStyle: StyleValue;\n hideTrack: boolean;\n highlightClass: string;\n tickClassOverride: string \| undefined;\n isHighlighted: (index: number) => boolean;\n}\n\nconst {\n containerClass,\n containerStyle,\n count,\n hideTrack,\n highlightClass,\n isHighlighted,\n tickClass,\n tickClassOverride,\n tickStyle,\n} = defineProps<SliderTicksProps>();\n\n/*\n A track-less slider paints every tick the same way; with a track, the ticks\n * up to the current value are highlighted and the rest keep the override.\n */\nfunction classesFor(index: number): (string \| undefined \| false)[] {\n if (hideTrack)\n return [tickClass, tickClassOverride];\n\n return [\n tickClass,\n isHighlighted(index) && highlightClass,\n !isHighlighted(index) && tickClassOverride,\n ];\n}\n</script>\n\n<template>\n <div\n :class=\"containerClass\"\n :style=\"containerStyle\"\n data-id=\"slider-ticks\"\n >\n <span\n v-for=\"i in count + 1\"\n :key=\"i\"\n :class=\"classesFor(i - 1)\"\n :style=\"tickStyle\"\n />\n </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+BA,SAAS,WAAW,OAA+C;GACjE,IAAI,QAAA,WACF,OAAO,CAAC,QAAA,WAAW,QAAA,iBAAiB;GAEtC,OAAO;IACL,QAAA;IACA,QAAA,cAAc,KAAK,KAAK,QAAA;IACxB,CAAC,QAAA,cAAc,KAAK,KAAK,QAAA;GAC3B;EACF;;GAIE,~~OAAA~~,UAAA,~~GAAA~~,mBAWM,OAAA;IAVH,~~OAAK~~,eAAE,QAAA,cAAc;IACrB,~~OAAK~~,eAAE,QAAA,cAAc;IACtB,WAAQ;~~GAER~~,~~GAAA~~,~~EAAA~~,UAAA,IAAA,~~GAAA~~,~~mBAKE~~,UAAA,~~MAAA~~,WAJY,QAAA,QAAK,IAAV,MAAC;IADV,~~OAAA~~,UAAA,~~GAAA~~,mBAKE,QAAA;KAHC,KAAK;KACL,~~OAAK~~,eAAE,WAAW,IAAC,CAAA,CAAA;KACnB,~~OAAK~~,eAAE,QAAA,SAAS"}
1	+ {"version":3,"file":"RuiSliderTicks.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeClass","_normalizeStyle","_Fragment","_renderList"],"sources":["../../../../src/components/forms/slider/RuiSliderTicks.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { StyleValue } from 'vue';\n\nexport interface SliderTicksProps {\n count: number;\n containerClass: string;\n containerStyle: StyleValue;\n tickClass: string;\n tickStyle: StyleValue;\n hideTrack: boolean;\n highlightClass: string;\n tickClassOverride: string \| undefined;\n isHighlighted: (index: number) => boolean;\n}\n\nconst {\n containerClass,\n containerStyle,\n count,\n hideTrack,\n highlightClass,\n isHighlighted,\n tickClass,\n tickClassOverride,\n tickStyle,\n} = defineProps<SliderTicksProps>();\n\n/*\n A track-less slider paints every tick the same way; with a track, the ticks\n * up to the current value are highlighted and the rest keep the override.\n */\nfunction classesFor(index: number): (string \| undefined \| false)[] {\n if (hideTrack)\n return [tickClass, tickClassOverride];\n\n return [\n tickClass,\n isHighlighted(index) && highlightClass,\n !isHighlighted(index) && tickClassOverride,\n ];\n}\n</script>\n\n<template>\n <div\n :class=\"containerClass\"\n :style=\"containerStyle\"\n data-id=\"slider-ticks\"\n >\n <span\n v-for=\"i in count + 1\"\n :key=\"i\"\n :class=\"classesFor(i - 1)\"\n :style=\"tickStyle\"\n />\n </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+BA,SAAS,WAAW,OAA+C;GACjE,IAAI,QAAA,WACF,OAAO,CAAC,QAAA,WAAW,QAAA,iBAAiB;GAEtC,OAAO;IACL,QAAA;IACA,QAAA,cAAc,KAAK,KAAK,QAAA;IACxB,CAAC,QAAA,cAAc,KAAK,KAAK,QAAA;GAC3B;EACF;;GAIE,OAAAA,UAAA,GAAAC,mBAWM,OAAA;IAVH,OAAKC,eAAE,QAAA,cAAc;IACrB,OAAKC,eAAE,QAAA,cAAc;IACtB,WAAQ;GAERH,GAAAA,EAAAA,UAAA,IAAA,GAAAC,mBAKEG,UAAA,MAAAC,WAJY,QAAA,QAAK,IAAV,MAAC;IADV,OAAAL,UAAA,GAAAC,mBAKE,QAAA;KAHC,KAAK;KACL,OAAKC,eAAE,WAAW,IAAC,CAAA,CAAA;KACnB,OAAKC,eAAE,QAAA,SAAS"}

package/dist/components/forms/switch/RuiSwitch.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RuiSwitch.js","names":[],"sources":["../../../../src/components/forms/switch/RuiSwitch.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport { useFormTextDetail } from '@/utils/form-text-detail';\nimport { getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\nimport { tv } from '@/utils/tv';\n\nexport interface Props {\n disabled?: boolean;\n color?: ContextColorsType;\n size?: 'sm';\n label?: string;\n hint?: string;\n errorMessages?: string \| string[];\n successMessages?: string \| string[];\n hideDetails?: boolean;\n required?: boolean;\n}\n\ndefineOptions({\n name: 'RuiSwitch',\n inheritAttrs: false,\n});\n\nconst modelValue = defineModel<boolean>({ default: false });\n\nconst {\n disabled = false,\n color = undefined,\n size = undefined,\n label = '',\n hint = '',\n errorMessages = [],\n successMessages = [],\n hideDetails = false,\n required = false,\n} = defineProps<Props>();\n\ndefineSlots<{\n default?: () => any;\n}>();\n\nconst switchStyles = tv({\n slots: {\n // 13px to the label, the gap a checkbox or radio leaves, so the focus ring clears the text\n wrapper: 'relative flex gap-3.25 items-start cursor-pointer group/switch',\n // 40 × 22, nudged down a pixel to sit centred on the label's 24px line\n inner: 'relative w-10 h-5.5 mt-px shrink-0',\n // the off track is the control edge color, 3:1 against the page in both themes\n input: 'peer appearance-none relative w-full h-full rounded-full bg-rui-outline transition-colors duration-150 cursor-pointer focus-visible:focus-ring',\n toggle: [\n 'absolute size-4.5 transition-all duration-75 ease-in-out -translate-y-1/2 top-1/2 rounded-full pointer-events-none',\n 'bg-white left-0.5 shadow-rui-control',\n ].join(' '),\n label: 'text-rui-text text-sm/6',\n },\n variants: {\n checked: {\n true: {\n toggle: 'left-5',\n },\n false: {},\n },\n disabled: {\n true: {\n wrapper: 'cursor-not-allowed',\n input: 'bg-rui-neutral-200! dark:bg-rui-neutral-800! cursor-not-allowed',\n toggle: 'bg-rui-neutral-50! dark:bg-rui-neutral-600! shadow-none!',\n label: 'text-rui-text-disabled',\n },\n },\n size: {\n sm: {\n inner: 'w-8.5 h-4.5 mt-0.75',\n toggle: 'size-3.5',\n },\n },\n // a ring and the message below mark the state; a filled red or green track would read as \"on\"\n validation: {\n error: {\n input: 'ring-1 ring-rui-error',\n },\n success: {\n input: 'ring-1 ring-rui-success',\n },\n },\n color: {\n primary: {},\n secondary: {},\n error: {},\n warning: {},\n info: {},\n success: {},\n },\n },\n compoundVariants: [\n { checked: false, disabled: false, class: { input: 'group-hover/switch:bg-rui-neutral-500 dark:group-hover/switch:bg-rui-neutral-400' } },\n\n // Checked (no color): an inverted neutral track, with a dark knob in dark mode\n { checked: true, disabled: false, class: { input: 'bg-rui-neutral-900 dark:bg-rui-neutral-100', toggle: 'dark:bg-rui-neutral-900' } },\n\n // Checked + color: a solid track with the white knob, in both themes\n { checked: true, disabled: false, color: 'primary', class: { input: 'bg-rui-primary dark:bg-rui-primary', toggle: 'dark:bg-white' } },\n { checked: true, disabled: false, color: 'secondary', class: { input: 'bg-rui-secondary dark:bg-rui-secondary', toggle: 'dark:bg-white' } },\n // a status color's dark `main` is a text tone, so the track takes the deep `darker` under the white knob\n { checked: true, disabled: false, color: 'error', class: { input: 'bg-rui-error dark:bg-rui-error-darker', toggle: 'dark:bg-white' } },\n { checked: true, disabled: false, color: 'warning', class: { input: 'bg-rui-warning dark:bg-rui-warning-darker', toggle: 'dark:bg-white' } },\n { checked: true, disabled: false, color: 'info', class: { input: 'bg-rui-info dark:bg-rui-info-darker', toggle: 'dark:bg-white' } },\n { checked: true, disabled: false, color: 'success', class: { input: 'bg-rui-success dark:bg-rui-success-darker', toggle: 'dark:bg-white' } },\n\n // Size sm + checked: 34 - 14 - 2\n { size: 'sm', checked: true, class: { toggle: 'left-4.5' } },\n ],\n defaultVariants: {\n checked: false,\n disabled: false,\n },\n});\n\nconst { hasError, validation } = useFormTextDetail(\n () => errorMessages,\n () => successMessages,\n);\n\nconst ui = computed<ReturnType<typeof switchStyles>>(() => switchStyles({\n checked: get(modelValue),\n disabled,\n size,\n validation: get(validation),\n color,\n}));\n\nfunction input(event: Event): void {\n const target = event.target;\n if (target instanceof HTMLInputElement)\n set(modelValue, target.checked);\n}\n</script>\n\n<template>\n <div v-bind=\"getRootAttrs($attrs)\">\n <label\n :class=\"ui.wrapper()\"\n :data-disabled=\"disabled \|\| undefined\"\n :data-checked=\"modelValue \|\| undefined\"\n :data-error=\"hasError ? '' : undefined\"\n >\n <div :class=\"ui.inner()\">\n <input\n :checked=\"modelValue\"\n type=\"checkbox\"\n :class=\"ui.input()\"\n :disabled=\"disabled\"\n :aria-invalid=\"hasError\"\n v-bind=\"getNonRootAttrs($attrs)\"\n @input=\"input($event)\"\n />\n <div :class=\"ui.toggle()\" />\n </div>\n <span\n v-if=\"label \|\| $slots.default\"\n :class=\"ui.label()\"\n >\n <slot>{{ label }}</slot>\n <span\n v-if=\"required\"\n class=\"text-rui-error\"\n >\n *\n </span>\n </span>\n </label>\n <RuiFormTextDetail\n v-if=\"!hideDetails\"\n class=\"pt-1\"\n :error-messages=\"errorMessages\"\n :success-messages=\"successMessages\"\n :hint=\"hint\"\n />\n </div>\n</template>\n"],"mappings":""}
1	+ {"version":3,"file":"RuiSwitch.js","names":["_sfc_main"],"sources":["../../../../src/components/forms/switch/RuiSwitch.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport { useFormTextDetail } from '@/utils/form-text-detail';\nimport { getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\nimport { tv } from '@/utils/tv';\n\nexport interface Props {\n disabled?: boolean;\n color?: ContextColorsType;\n size?: 'sm';\n label?: string;\n hint?: string;\n errorMessages?: string \| string[];\n successMessages?: string \| string[];\n hideDetails?: boolean;\n required?: boolean;\n}\n\ndefineOptions({\n name: 'RuiSwitch',\n inheritAttrs: false,\n});\n\nconst modelValue = defineModel<boolean>({ default: false });\n\nconst {\n disabled = false,\n color = undefined,\n size = undefined,\n label = '',\n hint = '',\n errorMessages = [],\n successMessages = [],\n hideDetails = false,\n required = false,\n} = defineProps<Props>();\n\ndefineSlots<{\n default?: () => any;\n}>();\n\nconst switchStyles = tv({\n slots: {\n // 13px to the label, the gap a checkbox or radio leaves, so the focus ring clears the text\n wrapper: 'relative flex gap-3.25 items-start cursor-pointer group/switch',\n // 40 × 22, nudged down a pixel to sit centred on the label's 24px line\n inner: 'relative w-10 h-5.5 mt-px shrink-0',\n // the off track is the control edge color, 3:1 against the page in both themes\n input: 'peer appearance-none relative w-full h-full rounded-full bg-rui-outline transition-colors duration-150 cursor-pointer focus-visible:focus-ring',\n toggle: [\n 'absolute size-4.5 transition-all duration-75 ease-in-out -translate-y-1/2 top-1/2 rounded-full pointer-events-none',\n 'bg-white left-0.5 shadow-rui-control',\n ].join(' '),\n label: 'text-rui-text text-sm/6',\n },\n variants: {\n checked: {\n true: {\n toggle: 'left-5',\n },\n false: {},\n },\n disabled: {\n true: {\n wrapper: 'cursor-not-allowed',\n input: 'bg-rui-neutral-200! dark:bg-rui-neutral-800! cursor-not-allowed',\n toggle: 'bg-rui-neutral-50! dark:bg-rui-neutral-600! shadow-none!',\n label: 'text-rui-text-disabled',\n },\n },\n size: {\n sm: {\n inner: 'w-8.5 h-4.5 mt-0.75',\n toggle: 'size-3.5',\n },\n },\n // a ring and the message below mark the state; a filled red or green track would read as \"on\"\n validation: {\n error: {\n input: 'ring-1 ring-rui-error',\n },\n success: {\n input: 'ring-1 ring-rui-success',\n },\n },\n color: {\n primary: {},\n secondary: {},\n error: {},\n warning: {},\n info: {},\n success: {},\n },\n },\n compoundVariants: [\n { checked: false, disabled: false, class: { input: 'group-hover/switch:bg-rui-neutral-500 dark:group-hover/switch:bg-rui-neutral-400' } },\n\n // Checked (no color): an inverted neutral track, with a dark knob in dark mode\n { checked: true, disabled: false, class: { input: 'bg-rui-neutral-900 dark:bg-rui-neutral-100', toggle: 'dark:bg-rui-neutral-900' } },\n\n // Checked + color: a solid track with the white knob, in both themes\n { checked: true, disabled: false, color: 'primary', class: { input: 'bg-rui-primary dark:bg-rui-primary', toggle: 'dark:bg-white' } },\n { checked: true, disabled: false, color: 'secondary', class: { input: 'bg-rui-secondary dark:bg-rui-secondary', toggle: 'dark:bg-white' } },\n // a status color's dark `main` is a text tone, so the track takes the deep `darker` under the white knob\n { checked: true, disabled: false, color: 'error', class: { input: 'bg-rui-error dark:bg-rui-error-darker', toggle: 'dark:bg-white' } },\n { checked: true, disabled: false, color: 'warning', class: { input: 'bg-rui-warning dark:bg-rui-warning-darker', toggle: 'dark:bg-white' } },\n { checked: true, disabled: false, color: 'info', class: { input: 'bg-rui-info dark:bg-rui-info-darker', toggle: 'dark:bg-white' } },\n { checked: true, disabled: false, color: 'success', class: { input: 'bg-rui-success dark:bg-rui-success-darker', toggle: 'dark:bg-white' } },\n\n // Size sm + checked: 34 - 14 - 2\n { size: 'sm', checked: true, class: { toggle: 'left-4.5' } },\n ],\n defaultVariants: {\n checked: false,\n disabled: false,\n },\n});\n\nconst { hasError, validation } = useFormTextDetail(\n () => errorMessages,\n () => successMessages,\n);\n\nconst ui = computed<ReturnType<typeof switchStyles>>(() => switchStyles({\n checked: get(modelValue),\n disabled,\n size,\n validation: get(validation),\n color,\n}));\n\nfunction input(event: Event): void {\n const target = event.target;\n if (target instanceof HTMLInputElement)\n set(modelValue, target.checked);\n}\n</script>\n\n<template>\n <div v-bind=\"getRootAttrs($attrs)\">\n <label\n :class=\"ui.wrapper()\"\n :data-disabled=\"disabled \|\| undefined\"\n :data-checked=\"modelValue \|\| undefined\"\n :data-error=\"hasError ? '' : undefined\"\n >\n <div :class=\"ui.inner()\">\n <input\n :checked=\"modelValue\"\n type=\"checkbox\"\n :class=\"ui.input()\"\n :disabled=\"disabled\"\n :aria-invalid=\"hasError\"\n v-bind=\"getNonRootAttrs($attrs)\"\n @input=\"input($event)\"\n />\n <div :class=\"ui.toggle()\" />\n </div>\n <span\n v-if=\"label \|\| $slots.default\"\n :class=\"ui.label()\"\n >\n <slot>{{ label }}</slot>\n <span\n v-if=\"required\"\n class=\"text-rui-error\"\n >\n *\n </span>\n </span>\n </label>\n <RuiFormTextDetail\n v-if=\"!hideDetails\"\n class=\"pt-1\"\n :error-messages=\"errorMessages\"\n :success-messages=\"successMessages\"\n :hint=\"hint\"\n />\n </div>\n</template>\n"],"mappings":""}

package/dist/components/forms/switch/RuiSwitch.vue_vue_type_script_setup_true_lang.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RuiSwitch.vue_vue_type_script_setup_true_lang.js","names":["$attrs","$slots"],"sources":["../../../../src/components/forms/switch/RuiSwitch.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport { useFormTextDetail } from '@/utils/form-text-detail';\nimport { getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\nimport { tv } from '@/utils/tv';\n\nexport interface Props {\n disabled?: boolean;\n color?: ContextColorsType;\n size?: 'sm';\n label?: string;\n hint?: string;\n errorMessages?: string \| string[];\n successMessages?: string \| string[];\n hideDetails?: boolean;\n required?: boolean;\n}\n\ndefineOptions({\n name: 'RuiSwitch',\n inheritAttrs: false,\n});\n\nconst modelValue = defineModel<boolean>({ default: false });\n\nconst {\n disabled = false,\n color = undefined,\n size = undefined,\n label = '',\n hint = '',\n errorMessages = [],\n successMessages = [],\n hideDetails = false,\n required = false,\n} = defineProps<Props>();\n\ndefineSlots<{\n default?: () => any;\n}>();\n\nconst switchStyles = tv({\n slots: {\n // 13px to the label, the gap a checkbox or radio leaves, so the focus ring clears the text\n wrapper: 'relative flex gap-3.25 items-start cursor-pointer group/switch',\n // 40 × 22, nudged down a pixel to sit centred on the label's 24px line\n inner: 'relative w-10 h-5.5 mt-px shrink-0',\n // the off track is the control edge color, 3:1 against the page in both themes\n input: 'peer appearance-none relative w-full h-full rounded-full bg-rui-outline transition-colors duration-150 cursor-pointer focus-visible:focus-ring',\n toggle: [\n 'absolute size-4.5 transition-all duration-75 ease-in-out -translate-y-1/2 top-1/2 rounded-full pointer-events-none',\n 'bg-white left-0.5 shadow-rui-control',\n ].join(' '),\n label: 'text-rui-text text-sm/6',\n },\n variants: {\n checked: {\n true: {\n toggle: 'left-5',\n },\n false: {},\n },\n disabled: {\n true: {\n wrapper: 'cursor-not-allowed',\n input: 'bg-rui-neutral-200! dark:bg-rui-neutral-800! cursor-not-allowed',\n toggle: 'bg-rui-neutral-50! dark:bg-rui-neutral-600! shadow-none!',\n label: 'text-rui-text-disabled',\n },\n },\n size: {\n sm: {\n inner: 'w-8.5 h-4.5 mt-0.75',\n toggle: 'size-3.5',\n },\n },\n // a ring and the message below mark the state; a filled red or green track would read as \"on\"\n validation: {\n error: {\n input: 'ring-1 ring-rui-error',\n },\n success: {\n input: 'ring-1 ring-rui-success',\n },\n },\n color: {\n primary: {},\n secondary: {},\n error: {},\n warning: {},\n info: {},\n success: {},\n },\n },\n compoundVariants: [\n { checked: false, disabled: false, class: { input: 'group-hover/switch:bg-rui-neutral-500 dark:group-hover/switch:bg-rui-neutral-400' } },\n\n // Checked (no color): an inverted neutral track, with a dark knob in dark mode\n { checked: true, disabled: false, class: { input: 'bg-rui-neutral-900 dark:bg-rui-neutral-100', toggle: 'dark:bg-rui-neutral-900' } },\n\n // Checked + color: a solid track with the white knob, in both themes\n { checked: true, disabled: false, color: 'primary', class: { input: 'bg-rui-primary dark:bg-rui-primary', toggle: 'dark:bg-white' } },\n { checked: true, disabled: false, color: 'secondary', class: { input: 'bg-rui-secondary dark:bg-rui-secondary', toggle: 'dark:bg-white' } },\n // a status color's dark `main` is a text tone, so the track takes the deep `darker` under the white knob\n { checked: true, disabled: false, color: 'error', class: { input: 'bg-rui-error dark:bg-rui-error-darker', toggle: 'dark:bg-white' } },\n { checked: true, disabled: false, color: 'warning', class: { input: 'bg-rui-warning dark:bg-rui-warning-darker', toggle: 'dark:bg-white' } },\n { checked: true, disabled: false, color: 'info', class: { input: 'bg-rui-info dark:bg-rui-info-darker', toggle: 'dark:bg-white' } },\n { checked: true, disabled: false, color: 'success', class: { input: 'bg-rui-success dark:bg-rui-success-darker', toggle: 'dark:bg-white' } },\n\n // Size sm + checked: 34 - 14 - 2\n { size: 'sm', checked: true, class: { toggle: 'left-4.5' } },\n ],\n defaultVariants: {\n checked: false,\n disabled: false,\n },\n});\n\nconst { hasError, validation } = useFormTextDetail(\n () => errorMessages,\n () => successMessages,\n);\n\nconst ui = computed<ReturnType<typeof switchStyles>>(() => switchStyles({\n checked: get(modelValue),\n disabled,\n size,\n validation: get(validation),\n color,\n}));\n\nfunction input(event: Event): void {\n const target = event.target;\n if (target instanceof HTMLInputElement)\n set(modelValue, target.checked);\n}\n</script>\n\n<template>\n <div v-bind=\"getRootAttrs($attrs)\">\n <label\n :class=\"ui.wrapper()\"\n :data-disabled=\"disabled \|\| undefined\"\n :data-checked=\"modelValue \|\| undefined\"\n :data-error=\"hasError ? '' : undefined\"\n >\n <div :class=\"ui.inner()\">\n <input\n :checked=\"modelValue\"\n type=\"checkbox\"\n :class=\"ui.input()\"\n :disabled=\"disabled\"\n :aria-invalid=\"hasError\"\n v-bind=\"getNonRootAttrs($attrs)\"\n @input=\"input($event)\"\n />\n <div :class=\"ui.toggle()\" />\n </div>\n <span\n v-if=\"label \|\| $slots.default\"\n :class=\"ui.label()\"\n >\n <slot>{{ label }}</slot>\n <span\n v-if=\"required\"\n class=\"text-rui-error\"\n >\n *\n </span>\n </span>\n </label>\n <RuiFormTextDetail\n v-if=\"!hideDetails\"\n class=\"pt-1\"\n :error-messages=\"errorMessages\"\n :success-messages=\"successMessages\"\n :hint=\"hint\"\n />\n </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwBA,MAAM,~~aAAa~~,SAAoB,SAAA,YAAmB;EAkB1D,MAAM,eAAe,GAAG;GACtB,OAAO;IAEL,SAAS;IAET,OAAO;IAEP,OAAO;IACP,QAAQ,CACN,sHACA,sCACF,CAAC,CAAC,KAAK,GAAG;IACV,OAAO;GACT;GACA,UAAU;IACR,SAAS;KACP,MAAM,EACJ,QAAQ,SACV;KACA,OAAO,CAAC;IACV;IACA,UAAU,EACR,MAAM;KACJ,SAAS;KACT,OAAO;KACP,QAAQ;KACR,OAAO;IACT,EACF;IACA,MAAM,EACJ,IAAI;KACF,OAAO;KACP,QAAQ;IACV,EACF;IAEA,YAAY;KACV,OAAO,EACL,OAAO,wBACT;KACA,SAAS,EACP,OAAO,0BACT;IACF;IACA,OAAO;KACL,SAAS,CAAC;KACV,WAAW,CAAC;KACZ,OAAO,CAAC;KACR,SAAS,CAAC;KACV,MAAM,CAAC;KACP,SAAS,CAAC;IACZ;GACF;GACA,kBAAkB;IAChB;KAAE,SAAS;KAAO,UAAU;KAAO,OAAO,EAAE,OAAO,mFAAmF;IAAE;IAGxI;KAAE,SAAS;KAAM,UAAU;KAAO,OAAO;MAAE,OAAO;MAA8C,QAAQ;KAA0B;IAAE;IAGpI;KAAE,SAAS;KAAM,UAAU;KAAO,OAAO;KAAW,OAAO;MAAE,OAAO;MAAsC,QAAQ;KAAgB;IAAE;IACpI;KAAE,SAAS;KAAM,UAAU;KAAO,OAAO;KAAa,OAAO;MAAE,OAAO;MAA0C,QAAQ;KAAgB;IAAE;IAE1I;KAAE,SAAS;KAAM,UAAU;KAAO,OAAO;KAAS,OAAO;MAAE,OAAO;MAAyC,QAAQ;KAAgB;IAAE;IACrI;KAAE,SAAS;KAAM,UAAU;KAAO,OAAO;KAAW,OAAO;MAAE,OAAO;MAA6C,QAAQ;KAAgB;IAAE;IAC3I;KAAE,SAAS;KAAM,UAAU;KAAO,OAAO;KAAQ,OAAO;MAAE,OAAO;MAAuC,QAAQ;KAAgB;IAAE;IAClI;KAAE,SAAS;KAAM,UAAU;KAAO,OAAO;KAAW,OAAO;MAAE,OAAO;MAA6C,QAAQ;KAAgB;IAAE;IAG3I;KAAE,MAAM;KAAM,SAAS;KAAM,OAAO,EAAE,QAAQ,WAAW;IAAE;GAC7D;GACA,iBAAiB;IACf,SAAS;IACT,UAAU;GACZ;EACF,CAAC;EAED,MAAM,EAAE,UAAU,eAAe,wBACzB,QAAA,qBACA,QAAA,eACR;EAEA,MAAM,KAAK,eAAgD,aAAa;GACtE,SAAS,IAAI,UAAU;GACvB,UAAO,QAAA;GACP,MAAG,QAAA;GACH,YAAY,IAAI,UAAU;GAC1B,OAAI,QAAA;EACN,CAAC,CAAC;EAEF,SAAS,MAAM,OAAoB;GACjC,MAAM,SAAS,MAAM;GACrB,IAAI,kBAAkB,kBACpB,IAAI,YAAY,OAAO,OAAO;EAClC;;GAIE,~~OAAA~~,UAAA,~~GAAA~~,mBAuCM,~~OAAA~~,~~eAAA~~,~~mBAvCO~~,MAAA,YAAA,CAAY,~~CAACA~~,KAAAA,MAAM,CAAA,CAAA,GAAA,~~CAC9B~~,mBA8BQ,SAAA;IA7BL,~~OAAK~~,~~eAAE~~,MAAA,EAAA,CAAE,CAAC,QAAO,CAAA;IACjB,iBAAe,QAAA,YAAY,KAAA;IAC3B,gBAAc,WAAA,SAAc,KAAA;IAC5B,~~cAAY~~,MAAA,QAAA,IAAQ,KAAQ,KAAA;~~GAE7B~~,~~GAAA~~,~~CAAA~~,mBAWM,OAAA,EAXA,~~OAAK~~,~~eAAE~~,MAAA,EAAA,CAAE,CAAC,MAAK,CAAA,EAAA,GAAA,~~CACnB~~,mBAQE,~~SARF~~,WAQE;IAPC,SAAS,WAAA;IACV,MAAK;IACJ,~~OAAO~~,MAAA,EAAA,CAAE,CAAC,MAAK;IACf,UAAU,QAAA;IACV,~~gBAAc~~,MAAA,QAAA;GACP,~~GAAA~~,MAAA,eAAA,CAAe,~~CAACA~~,KAAAA,MAAM,GAAA,EAC7B,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,MAAM,MAAM,GAAA,CAAA,GAAA,MAAA,IAAA,UAAA,~~GAEtB~~,mBAA4B,OAAA,EAAtB,~~OAAK~~,~~eAAE~~,MAAA,EAAA,CAAE,CAAC,OAAM,CAAA,EAAA,GAAA,MAAA,CAAA,CAAA,GAAA,CAAA,GAGhB,QAAA,~~SAASC~~,KAAAA,OAAO,~~WADxB~~,UAAA,~~GAAA~~,mBAWO,QAAA;;IATJ,~~OAAK~~,~~eAAE~~,MAAA,EAAA,CAAE,CAAC,MAAK,CAAA;~~GAEhB~~,~~GAAA~~,~~CAAA~~,WAAwB,KAAA,QAAA,WAAA,CAAA,SAAA,~~CAAf~~,~~gBAAA~~,gBAAA,QAAA,KAAK,GAAA,CAAA,CAAA,CAAA,GAEN,QAAA,~~YADR~~,UAAA,~~GAAA~~,mBAKO,QALP,YAGC,KAED,KAAA,mBAAA,IAAA,IAAA,CAAA,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,GAAA,IAAA,UAAA,GAIK,CAAA,QAAA,~~eADT~~,UAAA,~~GAAA~~,~~YAME~~,2BAAA;;IAJA,OAAM;IACL,kBAAgB,QAAA;IAChB,oBAAkB,QAAA;IAClB,MAAM,QAAA"}
1	+ {"version":3,"file":"RuiSwitch.vue_vue_type_script_setup_true_lang.js","names":["$attrs","$slots","_useModel","_openBlock","_createElementBlock","_normalizeProps","_guardReactiveProps","_unref","_createElementVNode","_normalizeClass","_mergeProps","_renderSlot","_createTextVNode","_toDisplayString","_createCommentVNode","_createBlock","RuiFormTextDetail"],"sources":["../../../../src/components/forms/switch/RuiSwitch.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport { useFormTextDetail } from '@/utils/form-text-detail';\nimport { getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\nimport { tv } from '@/utils/tv';\n\nexport interface Props {\n disabled?: boolean;\n color?: ContextColorsType;\n size?: 'sm';\n label?: string;\n hint?: string;\n errorMessages?: string \| string[];\n successMessages?: string \| string[];\n hideDetails?: boolean;\n required?: boolean;\n}\n\ndefineOptions({\n name: 'RuiSwitch',\n inheritAttrs: false,\n});\n\nconst modelValue = defineModel<boolean>({ default: false });\n\nconst {\n disabled = false,\n color = undefined,\n size = undefined,\n label = '',\n hint = '',\n errorMessages = [],\n successMessages = [],\n hideDetails = false,\n required = false,\n} = defineProps<Props>();\n\ndefineSlots<{\n default?: () => any;\n}>();\n\nconst switchStyles = tv({\n slots: {\n // 13px to the label, the gap a checkbox or radio leaves, so the focus ring clears the text\n wrapper: 'relative flex gap-3.25 items-start cursor-pointer group/switch',\n // 40 × 22, nudged down a pixel to sit centred on the label's 24px line\n inner: 'relative w-10 h-5.5 mt-px shrink-0',\n // the off track is the control edge color, 3:1 against the page in both themes\n input: 'peer appearance-none relative w-full h-full rounded-full bg-rui-outline transition-colors duration-150 cursor-pointer focus-visible:focus-ring',\n toggle: [\n 'absolute size-4.5 transition-all duration-75 ease-in-out -translate-y-1/2 top-1/2 rounded-full pointer-events-none',\n 'bg-white left-0.5 shadow-rui-control',\n ].join(' '),\n label: 'text-rui-text text-sm/6',\n },\n variants: {\n checked: {\n true: {\n toggle: 'left-5',\n },\n false: {},\n },\n disabled: {\n true: {\n wrapper: 'cursor-not-allowed',\n input: 'bg-rui-neutral-200! dark:bg-rui-neutral-800! cursor-not-allowed',\n toggle: 'bg-rui-neutral-50! dark:bg-rui-neutral-600! shadow-none!',\n label: 'text-rui-text-disabled',\n },\n },\n size: {\n sm: {\n inner: 'w-8.5 h-4.5 mt-0.75',\n toggle: 'size-3.5',\n },\n },\n // a ring and the message below mark the state; a filled red or green track would read as \"on\"\n validation: {\n error: {\n input: 'ring-1 ring-rui-error',\n },\n success: {\n input: 'ring-1 ring-rui-success',\n },\n },\n color: {\n primary: {},\n secondary: {},\n error: {},\n warning: {},\n info: {},\n success: {},\n },\n },\n compoundVariants: [\n { checked: false, disabled: false, class: { input: 'group-hover/switch:bg-rui-neutral-500 dark:group-hover/switch:bg-rui-neutral-400' } },\n\n // Checked (no color): an inverted neutral track, with a dark knob in dark mode\n { checked: true, disabled: false, class: { input: 'bg-rui-neutral-900 dark:bg-rui-neutral-100', toggle: 'dark:bg-rui-neutral-900' } },\n\n // Checked + color: a solid track with the white knob, in both themes\n { checked: true, disabled: false, color: 'primary', class: { input: 'bg-rui-primary dark:bg-rui-primary', toggle: 'dark:bg-white' } },\n { checked: true, disabled: false, color: 'secondary', class: { input: 'bg-rui-secondary dark:bg-rui-secondary', toggle: 'dark:bg-white' } },\n // a status color's dark `main` is a text tone, so the track takes the deep `darker` under the white knob\n { checked: true, disabled: false, color: 'error', class: { input: 'bg-rui-error dark:bg-rui-error-darker', toggle: 'dark:bg-white' } },\n { checked: true, disabled: false, color: 'warning', class: { input: 'bg-rui-warning dark:bg-rui-warning-darker', toggle: 'dark:bg-white' } },\n { checked: true, disabled: false, color: 'info', class: { input: 'bg-rui-info dark:bg-rui-info-darker', toggle: 'dark:bg-white' } },\n { checked: true, disabled: false, color: 'success', class: { input: 'bg-rui-success dark:bg-rui-success-darker', toggle: 'dark:bg-white' } },\n\n // Size sm + checked: 34 - 14 - 2\n { size: 'sm', checked: true, class: { toggle: 'left-4.5' } },\n ],\n defaultVariants: {\n checked: false,\n disabled: false,\n },\n});\n\nconst { hasError, validation } = useFormTextDetail(\n () => errorMessages,\n () => successMessages,\n);\n\nconst ui = computed<ReturnType<typeof switchStyles>>(() => switchStyles({\n checked: get(modelValue),\n disabled,\n size,\n validation: get(validation),\n color,\n}));\n\nfunction input(event: Event): void {\n const target = event.target;\n if (target instanceof HTMLInputElement)\n set(modelValue, target.checked);\n}\n</script>\n\n<template>\n <div v-bind=\"getRootAttrs($attrs)\">\n <label\n :class=\"ui.wrapper()\"\n :data-disabled=\"disabled \|\| undefined\"\n :data-checked=\"modelValue \|\| undefined\"\n :data-error=\"hasError ? '' : undefined\"\n >\n <div :class=\"ui.inner()\">\n <input\n :checked=\"modelValue\"\n type=\"checkbox\"\n :class=\"ui.input()\"\n :disabled=\"disabled\"\n :aria-invalid=\"hasError\"\n v-bind=\"getNonRootAttrs($attrs)\"\n @input=\"input($event)\"\n />\n <div :class=\"ui.toggle()\" />\n </div>\n <span\n v-if=\"label \|\| $slots.default\"\n :class=\"ui.label()\"\n >\n <slot>{{ label }}</slot>\n <span\n v-if=\"required\"\n class=\"text-rui-error\"\n >\n *\n </span>\n </span>\n </label>\n <RuiFormTextDetail\n v-if=\"!hideDetails\"\n class=\"pt-1\"\n :error-messages=\"errorMessages\"\n :success-messages=\"successMessages\"\n :hint=\"hint\"\n />\n </div>\n</template>\n"],"mappings":"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"}

package/dist/components/forms/text-area/RuiTextArea.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RuiTextArea.js","names":[],"sources":["../../../../src/components/forms/text-area/RuiTextArea.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiFieldLabel from '@/components/forms/field-label/RuiFieldLabel.vue';\nimport { textAreaStyles } from '@/components/forms/text-area/text-area-styles';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { type LabelPlacement, useLabelPlacement } from '@/composables/defaults/field';\nimport { usePrependAppendWidth } from '@/composables/forms/use-prepend-append-width';\nimport { useTimeoutManager } from '@/composables/timeout-manager';\nimport { useFormTextDetail } from '@/utils/form-text-detail';\nimport { getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\n\nexport interface TextAreaProps {\n label?: string;\n placeholder?: string;\n disabled?: boolean;\n /** Where the label shows; falls back to the nearest `RuiFieldDefaults`, then the app default, then `top`. /\n labelPlacement?: LabelPlacement;\n color?: ContextColorsType;\n textColor?: ContextColorsType;\n dense?: boolean;\n hint?: string;\n errorMessages?: string \| string[];\n successMessages?: string \| string[];\n hideDetails?: boolean;\n prependIcon?: RuiIcons;\n appendIcon?: RuiIcons;\n readonly?: boolean;\n clearable?: boolean;\n noResize?: boolean;\n minRows?: number \| string;\n maxRows?: number \| string;\n rowHeight?: number \| string;\n autoGrow?: boolean;\n required?: boolean;\n}\n\ndefineOptions({\n name: 'RuiTextArea',\n inheritAttrs: false,\n});\n\nconst modelValue = defineModel<string>({ required: true });\n\nconst {\n label = '',\n placeholder = '',\n disabled = false,\n labelPlacement = undefined,\n color = undefined,\n textColor = undefined,\n dense = false,\n hint = '',\n errorMessages = [],\n successMessages = [],\n hideDetails = false,\n prependIcon = undefined,\n appendIcon = undefined,\n readonly = false,\n clearable = false,\n noResize = false,\n minRows = 2,\n rowHeight = 1.5,\n maxRows = undefined,\n autoGrow = false,\n required = false,\n} = defineProps<TextAreaProps>();\n\nconst emit = defineEmits<{\n 'click:clear': [];\n}>();\n\ndefineSlots<{\n prepend?: () => any;\n append?: () => any;\n}>();\n\nconst isHovered = ref<boolean>(false);\nconst showClearButton = ref<boolean>(false);\n\nconst prepend = useTemplateRef<HTMLDivElement>('prepend');\nconst append = useTemplateRef<HTMLDivElement>('append');\nconst textarea = useTemplateRef<HTMLTextAreaElement>('textarea');\nconst textareaSizer = useTemplateRef<HTMLTextAreaElement>('textareaSizer');\n\nconst generatedId = useId();\nconst attrs = useAttrs();\n\nconst { focused } = useFocus(textarea);\nconst placement = useLabelPlacement(() => labelPlacement);\nconst { clear: cancelClearHide, create: delayClearHide } = useTimeoutManager();\nconst { prependWidth, appendWidth } = usePrependAppendWidth(prepend, append, 24);\nconst { hasError, hasSuccess, hasMessages, validation } = useFormTextDetail(\n () => errorMessages,\n () => successMessages,\n);\n\nconst textareaId = computed<string>(() => {\n const id = attrs.id;\n return typeof id === 'string' && id ? id : generatedId;\n});\n\nconst showClearIcon = computed<boolean>(() => clearable && !!get(modelValue) && !disabled && !readonly);\n\nconst effectiveTextColor = computed<ContextColorsType \| undefined>(() => {\n if (get(hasError))\n return 'error';\n if (get(hasSuccess))\n return 'success';\n if (textColor && !get(hasMessages))\n return textColor;\n return undefined;\n});\n\nconst effectiveColor = computed<ContextColorsType \| undefined>(() => get(validation) ?? color);\n\nconst ui = computed<ReturnType<typeof textAreaStyles>>(() => textAreaStyles({\n dense,\n disabled,\n readonly,\n noResize,\n hovered: get(isHovered),\n focused: get(focused),\n color: get(effectiveColor),\n textColor: get(effectiveTextColor),\n validation: get(validation),\n}));\n\nconst wrapperStyle = computed<Record<string, string>>(() => ({\n '--prepend-w': get(prependWidth),\n '--append-w': get(appendWidth),\n}));\n\nconst fieldStyles = computed<{ minHeight: string; maxHeight?: string }>(() => {\n const height = Number(rowHeight);\n const min = Number(minRows);\n const max = Number(maxRows);\n const value: { minHeight: string; maxHeight?: string } = {\n minHeight: `${min height + 0.75}rem`,\n };\n if (max)\n value.maxHeight = `${max * height + 0.75}rem`;\n\n return value;\n});\n\nfunction clearIconClicked(): void {\n set(modelValue, '');\n emit('click:clear');\n}\n\nfunction computeFieldHeight(newVal?: string, oldVal?: string): void {\n if (!autoGrow)\n return;\n\n const field = get(textarea);\n const fieldValue = newVal ?? get(modelValue);\n const fieldSizer = get(textareaSizer);\n if (!(field && fieldSizer))\n return;\n\n nextTick(() => {\n const sizerHeight = fieldSizer.scrollHeight;\n const fieldHeight = field.scrollHeight;\n let height = `${Math.max(sizerHeight, fieldHeight) / 16}rem`;\n if (oldVal && oldVal.length > fieldValue.length)\n height = `${Math.min(sizerHeight, fieldHeight) / 16}rem`;\n\n field.style.height = height;\n });\n}\n\nwatch(focused, (value) => {\n if (value) {\n // a refocus within the delay keeps the button\n cancelClearHide();\n set(showClearButton, true);\n }\n else {\n delayClearHide(() => set(showClearButton, false), 500);\n }\n});\n\nwatchDebounced(modelValue, computeFieldHeight, { debounce: 50 });\n\nonMounted(computeFieldHeight);\n\ndefineExpose({\n focus: () => get(textarea)?.focus(),\n element: textarea,\n});\n</script>\n\n<template>\n <div v-bind=\"getRootAttrs($attrs)\">\n <RuiFieldLabel\n v-if=\"label\"\n :text=\"label\"\n :for=\"textareaId\"\n :hidden=\"placement === 'hidden'\"\n :required=\"required\"\n :disabled=\"disabled\"\n />\n <div\n :class=\"ui.wrapper()\"\n :style=\"wrapperStyle\"\n data-id=\"wrapper\"\n @mouseenter=\"isHovered = true\"\n @mouseleave=\"isHovered = false\"\n >\n <div\n v-if=\"$slots.prepend \|\| prependIcon\"\n ref=\"prepend\"\n :class=\"ui.prepend()\"\n data-id=\"prepend\"\n >\n <slot\n v-if=\"$slots.prepend\"\n name=\"prepend\"\n />\n <div\n v-else-if=\"prependIcon\"\n :class=\"ui.icon()\"\n >\n <RuiIcon\n :name=\"prependIcon\"\n :size=\"18\"\n />\n </div>\n </div>\n <div :class=\"ui.inputWrapper()\">\n <textarea\n v-if=\"autoGrow\"\n ref=\"textareaSizer\"\n :value=\"modelValue\"\n :class=\"ui.textareaSizer()\"\n :style=\"fieldStyles\"\n aria-hidden=\"true\"\n disabled\n readonly\n />\n <textarea\n :id=\"textareaId\"\n ref=\"textarea\"\n v-model=\"modelValue\"\n :placeholder=\"placeholder \|\| ' '\"\n :class=\"ui.textarea()\"\n :style=\"fieldStyles\"\n :disabled=\"disabled\"\n :readonly=\"readonly\"\n :aria-invalid=\"hasError\"\n v-bind=\"getNonRootAttrs($attrs)\"\n />\n <fieldset :class=\"ui.fieldset()\" />\n </div>\n <div\n v-if=\"$slots.append \|\| appendIcon \|\| showClearIcon\"\n ref=\"append\"\n :class=\"ui.append()\"\n data-id=\"append\"\n >\n <RuiButton\n v-if=\"showClearIcon\"\n :class=\"[ui.clearButton(), { hidden: !showClearButton }]\"\n variant=\"text\"\n type=\"button\"\n icon\n data-id=\"clear-btn\"\n aria-label=\"Clear\"\n tabindex=\"-1\"\n @click.stop=\"clearIconClicked()\"\n >\n <RuiIcon\n name=\"lu-x\"\n size=\"16\"\n />\n </RuiButton>\n <slot\n v-if=\"$slots.append\"\n name=\"append\"\n />\n <div\n v-else-if=\"appendIcon\"\n :class=\"ui.icon()\"\n >\n <RuiIcon\n :name=\"appendIcon\"\n :size=\"18\"\n />\n </div>\n </div>\n </div>\n <RuiFormTextDetail\n v-if=\"!hideDetails\"\n :class=\"ui.details()\"\n :error-messages=\"errorMessages\"\n :success-messages=\"successMessages\"\n :hint=\"hint\"\n />\n </div>\n</template>\n"],"mappings":""}
1	+ {"version":3,"file":"RuiTextArea.js","names":["_sfc_main"],"sources":["../../../../src/components/forms/text-area/RuiTextArea.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiFieldLabel from '@/components/forms/field-label/RuiFieldLabel.vue';\nimport { textAreaStyles } from '@/components/forms/text-area/text-area-styles';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { type LabelPlacement, useLabelPlacement } from '@/composables/defaults/field';\nimport { usePrependAppendWidth } from '@/composables/forms/use-prepend-append-width';\nimport { useTimeoutManager } from '@/composables/timeout-manager';\nimport { useFormTextDetail } from '@/utils/form-text-detail';\nimport { getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\n\nexport interface TextAreaProps {\n label?: string;\n placeholder?: string;\n disabled?: boolean;\n /** Where the label shows; falls back to the nearest `RuiFieldDefaults`, then the app default, then `top`. /\n labelPlacement?: LabelPlacement;\n color?: ContextColorsType;\n textColor?: ContextColorsType;\n dense?: boolean;\n hint?: string;\n errorMessages?: string \| string[];\n successMessages?: string \| string[];\n hideDetails?: boolean;\n prependIcon?: RuiIcons;\n appendIcon?: RuiIcons;\n readonly?: boolean;\n clearable?: boolean;\n noResize?: boolean;\n minRows?: number \| string;\n maxRows?: number \| string;\n rowHeight?: number \| string;\n autoGrow?: boolean;\n required?: boolean;\n}\n\ndefineOptions({\n name: 'RuiTextArea',\n inheritAttrs: false,\n});\n\nconst modelValue = defineModel<string>({ required: true });\n\nconst {\n label = '',\n placeholder = '',\n disabled = false,\n labelPlacement = undefined,\n color = undefined,\n textColor = undefined,\n dense = false,\n hint = '',\n errorMessages = [],\n successMessages = [],\n hideDetails = false,\n prependIcon = undefined,\n appendIcon = undefined,\n readonly = false,\n clearable = false,\n noResize = false,\n minRows = 2,\n rowHeight = 1.5,\n maxRows = undefined,\n autoGrow = false,\n required = false,\n} = defineProps<TextAreaProps>();\n\nconst emit = defineEmits<{\n 'click:clear': [];\n}>();\n\ndefineSlots<{\n prepend?: () => any;\n append?: () => any;\n}>();\n\nconst isHovered = ref<boolean>(false);\nconst showClearButton = ref<boolean>(false);\n\nconst prepend = useTemplateRef<HTMLDivElement>('prepend');\nconst append = useTemplateRef<HTMLDivElement>('append');\nconst textarea = useTemplateRef<HTMLTextAreaElement>('textarea');\nconst textareaSizer = useTemplateRef<HTMLTextAreaElement>('textareaSizer');\n\nconst generatedId = useId();\nconst attrs = useAttrs();\n\nconst { focused } = useFocus(textarea);\nconst placement = useLabelPlacement(() => labelPlacement);\nconst { clear: cancelClearHide, create: delayClearHide } = useTimeoutManager();\nconst { prependWidth, appendWidth } = usePrependAppendWidth(prepend, append, 24);\nconst { hasError, hasSuccess, hasMessages, validation } = useFormTextDetail(\n () => errorMessages,\n () => successMessages,\n);\n\nconst textareaId = computed<string>(() => {\n const id = attrs.id;\n return typeof id === 'string' && id ? id : generatedId;\n});\n\nconst showClearIcon = computed<boolean>(() => clearable && !!get(modelValue) && !disabled && !readonly);\n\nconst effectiveTextColor = computed<ContextColorsType \| undefined>(() => {\n if (get(hasError))\n return 'error';\n if (get(hasSuccess))\n return 'success';\n if (textColor && !get(hasMessages))\n return textColor;\n return undefined;\n});\n\nconst effectiveColor = computed<ContextColorsType \| undefined>(() => get(validation) ?? color);\n\nconst ui = computed<ReturnType<typeof textAreaStyles>>(() => textAreaStyles({\n dense,\n disabled,\n readonly,\n noResize,\n hovered: get(isHovered),\n focused: get(focused),\n color: get(effectiveColor),\n textColor: get(effectiveTextColor),\n validation: get(validation),\n}));\n\nconst wrapperStyle = computed<Record<string, string>>(() => ({\n '--prepend-w': get(prependWidth),\n '--append-w': get(appendWidth),\n}));\n\nconst fieldStyles = computed<{ minHeight: string; maxHeight?: string }>(() => {\n const height = Number(rowHeight);\n const min = Number(minRows);\n const max = Number(maxRows);\n const value: { minHeight: string; maxHeight?: string } = {\n minHeight: `${min height + 0.75}rem`,\n };\n if (max)\n value.maxHeight = `${max * height + 0.75}rem`;\n\n return value;\n});\n\nfunction clearIconClicked(): void {\n set(modelValue, '');\n emit('click:clear');\n}\n\nfunction computeFieldHeight(newVal?: string, oldVal?: string): void {\n if (!autoGrow)\n return;\n\n const field = get(textarea);\n const fieldValue = newVal ?? get(modelValue);\n const fieldSizer = get(textareaSizer);\n if (!(field && fieldSizer))\n return;\n\n nextTick(() => {\n const sizerHeight = fieldSizer.scrollHeight;\n const fieldHeight = field.scrollHeight;\n let height = `${Math.max(sizerHeight, fieldHeight) / 16}rem`;\n if (oldVal && oldVal.length > fieldValue.length)\n height = `${Math.min(sizerHeight, fieldHeight) / 16}rem`;\n\n field.style.height = height;\n });\n}\n\nwatch(focused, (value) => {\n if (value) {\n // a refocus within the delay keeps the button\n cancelClearHide();\n set(showClearButton, true);\n }\n else {\n delayClearHide(() => set(showClearButton, false), 500);\n }\n});\n\nwatchDebounced(modelValue, computeFieldHeight, { debounce: 50 });\n\nonMounted(computeFieldHeight);\n\ndefineExpose({\n focus: () => get(textarea)?.focus(),\n element: textarea,\n});\n</script>\n\n<template>\n <div v-bind=\"getRootAttrs($attrs)\">\n <RuiFieldLabel\n v-if=\"label\"\n :text=\"label\"\n :for=\"textareaId\"\n :hidden=\"placement === 'hidden'\"\n :required=\"required\"\n :disabled=\"disabled\"\n />\n <div\n :class=\"ui.wrapper()\"\n :style=\"wrapperStyle\"\n data-id=\"wrapper\"\n @mouseenter=\"isHovered = true\"\n @mouseleave=\"isHovered = false\"\n >\n <div\n v-if=\"$slots.prepend \|\| prependIcon\"\n ref=\"prepend\"\n :class=\"ui.prepend()\"\n data-id=\"prepend\"\n >\n <slot\n v-if=\"$slots.prepend\"\n name=\"prepend\"\n />\n <div\n v-else-if=\"prependIcon\"\n :class=\"ui.icon()\"\n >\n <RuiIcon\n :name=\"prependIcon\"\n :size=\"18\"\n />\n </div>\n </div>\n <div :class=\"ui.inputWrapper()\">\n <textarea\n v-if=\"autoGrow\"\n ref=\"textareaSizer\"\n :value=\"modelValue\"\n :class=\"ui.textareaSizer()\"\n :style=\"fieldStyles\"\n aria-hidden=\"true\"\n disabled\n readonly\n />\n <textarea\n :id=\"textareaId\"\n ref=\"textarea\"\n v-model=\"modelValue\"\n :placeholder=\"placeholder \|\| ' '\"\n :class=\"ui.textarea()\"\n :style=\"fieldStyles\"\n :disabled=\"disabled\"\n :readonly=\"readonly\"\n :aria-invalid=\"hasError\"\n v-bind=\"getNonRootAttrs($attrs)\"\n />\n <fieldset :class=\"ui.fieldset()\" />\n </div>\n <div\n v-if=\"$slots.append \|\| appendIcon \|\| showClearIcon\"\n ref=\"append\"\n :class=\"ui.append()\"\n data-id=\"append\"\n >\n <RuiButton\n v-if=\"showClearIcon\"\n :class=\"[ui.clearButton(), { hidden: !showClearButton }]\"\n variant=\"text\"\n type=\"button\"\n icon\n data-id=\"clear-btn\"\n aria-label=\"Clear\"\n tabindex=\"-1\"\n @click.stop=\"clearIconClicked()\"\n >\n <RuiIcon\n name=\"lu-x\"\n size=\"16\"\n />\n </RuiButton>\n <slot\n v-if=\"$slots.append\"\n name=\"append\"\n />\n <div\n v-else-if=\"appendIcon\"\n :class=\"ui.icon()\"\n >\n <RuiIcon\n :name=\"appendIcon\"\n :size=\"18\"\n />\n </div>\n </div>\n </div>\n <RuiFormTextDetail\n v-if=\"!hideDetails\"\n :class=\"ui.details()\"\n :error-messages=\"errorMessages\"\n :success-messages=\"successMessages\"\n :hint=\"hint\"\n />\n </div>\n</template>\n"],"mappings":""}

package/dist/components/forms/text-area/RuiTextArea.vue_vue_type_script_setup_true_lang.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RuiTextArea.vue_vue_type_script_setup_true_lang.js","names":["$attrs","$slots"],"sources":["../../../../src/components/forms/text-area/RuiTextArea.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiFieldLabel from '@/components/forms/field-label/RuiFieldLabel.vue';\nimport { textAreaStyles } from '@/components/forms/text-area/text-area-styles';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { type LabelPlacement, useLabelPlacement } from '@/composables/defaults/field';\nimport { usePrependAppendWidth } from '@/composables/forms/use-prepend-append-width';\nimport { useTimeoutManager } from '@/composables/timeout-manager';\nimport { useFormTextDetail } from '@/utils/form-text-detail';\nimport { getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\n\nexport interface TextAreaProps {\n label?: string;\n placeholder?: string;\n disabled?: boolean;\n /** Where the label shows; falls back to the nearest `RuiFieldDefaults`, then the app default, then `top`. /\n labelPlacement?: LabelPlacement;\n color?: ContextColorsType;\n textColor?: ContextColorsType;\n dense?: boolean;\n hint?: string;\n errorMessages?: string \| string[];\n successMessages?: string \| string[];\n hideDetails?: boolean;\n prependIcon?: RuiIcons;\n appendIcon?: RuiIcons;\n readonly?: boolean;\n clearable?: boolean;\n noResize?: boolean;\n minRows?: number \| string;\n maxRows?: number \| string;\n rowHeight?: number \| string;\n autoGrow?: boolean;\n required?: boolean;\n}\n\ndefineOptions({\n name: 'RuiTextArea',\n inheritAttrs: false,\n});\n\nconst modelValue = defineModel<string>({ required: true });\n\nconst {\n label = '',\n placeholder = '',\n disabled = false,\n labelPlacement = undefined,\n color = undefined,\n textColor = undefined,\n dense = false,\n hint = '',\n errorMessages = [],\n successMessages = [],\n hideDetails = false,\n prependIcon = undefined,\n appendIcon = undefined,\n readonly = false,\n clearable = false,\n noResize = false,\n minRows = 2,\n rowHeight = 1.5,\n maxRows = undefined,\n autoGrow = false,\n required = false,\n} = defineProps<TextAreaProps>();\n\nconst emit = defineEmits<{\n 'click:clear': [];\n}>();\n\ndefineSlots<{\n prepend?: () => any;\n append?: () => any;\n}>();\n\nconst isHovered = ref<boolean>(false);\nconst showClearButton = ref<boolean>(false);\n\nconst prepend = useTemplateRef<HTMLDivElement>('prepend');\nconst append = useTemplateRef<HTMLDivElement>('append');\nconst textarea = useTemplateRef<HTMLTextAreaElement>('textarea');\nconst textareaSizer = useTemplateRef<HTMLTextAreaElement>('textareaSizer');\n\nconst generatedId = useId();\nconst attrs = useAttrs();\n\nconst { focused } = useFocus(textarea);\nconst placement = useLabelPlacement(() => labelPlacement);\nconst { clear: cancelClearHide, create: delayClearHide } = useTimeoutManager();\nconst { prependWidth, appendWidth } = usePrependAppendWidth(prepend, append, 24);\nconst { hasError, hasSuccess, hasMessages, validation } = useFormTextDetail(\n () => errorMessages,\n () => successMessages,\n);\n\nconst textareaId = computed<string>(() => {\n const id = attrs.id;\n return typeof id === 'string' && id ? id : generatedId;\n});\n\nconst showClearIcon = computed<boolean>(() => clearable && !!get(modelValue) && !disabled && !readonly);\n\nconst effectiveTextColor = computed<ContextColorsType \| undefined>(() => {\n if (get(hasError))\n return 'error';\n if (get(hasSuccess))\n return 'success';\n if (textColor && !get(hasMessages))\n return textColor;\n return undefined;\n});\n\nconst effectiveColor = computed<ContextColorsType \| undefined>(() => get(validation) ?? color);\n\nconst ui = computed<ReturnType<typeof textAreaStyles>>(() => textAreaStyles({\n dense,\n disabled,\n readonly,\n noResize,\n hovered: get(isHovered),\n focused: get(focused),\n color: get(effectiveColor),\n textColor: get(effectiveTextColor),\n validation: get(validation),\n}));\n\nconst wrapperStyle = computed<Record<string, string>>(() => ({\n '--prepend-w': get(prependWidth),\n '--append-w': get(appendWidth),\n}));\n\nconst fieldStyles = computed<{ minHeight: string; maxHeight?: string }>(() => {\n const height = Number(rowHeight);\n const min = Number(minRows);\n const max = Number(maxRows);\n const value: { minHeight: string; maxHeight?: string } = {\n minHeight: `${min height + 0.75}rem`,\n };\n if (max)\n value.maxHeight = `${max * height + 0.75}rem`;\n\n return value;\n});\n\nfunction clearIconClicked(): void {\n set(modelValue, '');\n emit('click:clear');\n}\n\nfunction computeFieldHeight(newVal?: string, oldVal?: string): void {\n if (!autoGrow)\n return;\n\n const field = get(textarea);\n const fieldValue = newVal ?? get(modelValue);\n const fieldSizer = get(textareaSizer);\n if (!(field && fieldSizer))\n return;\n\n nextTick(() => {\n const sizerHeight = fieldSizer.scrollHeight;\n const fieldHeight = field.scrollHeight;\n let height = `${Math.max(sizerHeight, fieldHeight) / 16}rem`;\n if (oldVal && oldVal.length > fieldValue.length)\n height = `${Math.min(sizerHeight, fieldHeight) / 16}rem`;\n\n field.style.height = height;\n });\n}\n\nwatch(focused, (value) => {\n if (value) {\n // a refocus within the delay keeps the button\n cancelClearHide();\n set(showClearButton, true);\n }\n else {\n delayClearHide(() => set(showClearButton, false), 500);\n }\n});\n\nwatchDebounced(modelValue, computeFieldHeight, { debounce: 50 });\n\nonMounted(computeFieldHeight);\n\ndefineExpose({\n focus: () => get(textarea)?.focus(),\n element: textarea,\n});\n</script>\n\n<template>\n <div v-bind=\"getRootAttrs($attrs)\">\n <RuiFieldLabel\n v-if=\"label\"\n :text=\"label\"\n :for=\"textareaId\"\n :hidden=\"placement === 'hidden'\"\n :required=\"required\"\n :disabled=\"disabled\"\n />\n <div\n :class=\"ui.wrapper()\"\n :style=\"wrapperStyle\"\n data-id=\"wrapper\"\n @mouseenter=\"isHovered = true\"\n @mouseleave=\"isHovered = false\"\n >\n <div\n v-if=\"$slots.prepend \|\| prependIcon\"\n ref=\"prepend\"\n :class=\"ui.prepend()\"\n data-id=\"prepend\"\n >\n <slot\n v-if=\"$slots.prepend\"\n name=\"prepend\"\n />\n <div\n v-else-if=\"prependIcon\"\n :class=\"ui.icon()\"\n >\n <RuiIcon\n :name=\"prependIcon\"\n :size=\"18\"\n />\n </div>\n </div>\n <div :class=\"ui.inputWrapper()\">\n <textarea\n v-if=\"autoGrow\"\n ref=\"textareaSizer\"\n :value=\"modelValue\"\n :class=\"ui.textareaSizer()\"\n :style=\"fieldStyles\"\n aria-hidden=\"true\"\n disabled\n readonly\n />\n <textarea\n :id=\"textareaId\"\n ref=\"textarea\"\n v-model=\"modelValue\"\n :placeholder=\"placeholder \|\| ' '\"\n :class=\"ui.textarea()\"\n :style=\"fieldStyles\"\n :disabled=\"disabled\"\n :readonly=\"readonly\"\n :aria-invalid=\"hasError\"\n v-bind=\"getNonRootAttrs($attrs)\"\n />\n <fieldset :class=\"ui.fieldset()\" />\n </div>\n <div\n v-if=\"$slots.append \|\| appendIcon \|\| showClearIcon\"\n ref=\"append\"\n :class=\"ui.append()\"\n data-id=\"append\"\n >\n <RuiButton\n v-if=\"showClearIcon\"\n :class=\"[ui.clearButton(), { hidden: !showClearButton }]\"\n variant=\"text\"\n type=\"button\"\n icon\n data-id=\"clear-btn\"\n aria-label=\"Clear\"\n tabindex=\"-1\"\n @click.stop=\"clearIconClicked()\"\n >\n <RuiIcon\n name=\"lu-x\"\n size=\"16\"\n />\n </RuiButton>\n <slot\n v-if=\"$slots.append\"\n name=\"append\"\n />\n <div\n v-else-if=\"appendIcon\"\n :class=\"ui.icon()\"\n >\n <RuiIcon\n :name=\"appendIcon\"\n :size=\"18\"\n />\n </div>\n </div>\n </div>\n <RuiFormTextDetail\n v-if=\"!hideDetails\"\n :class=\"ui.details()\"\n :error-messages=\"errorMessages\"\n :success-messages=\"successMessages\"\n :hint=\"hint\"\n />\n </div>\n</template>\n"],"mappings":"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"}
1	+ {"version":3,"file":"RuiTextArea.vue_vue_type_script_setup_true_lang.js","names":["$attrs","$slots","_useModel","_openBlock","_createElementBlock","_normalizeProps","_guardReactiveProps","_unref","_createBlock","RuiFieldLabel","_createCommentVNode","_createElementVNode","_normalizeClass","_normalizeStyle","_renderSlot","_createVNode","RuiIcon","_withDirectives","_mergeProps","_vModelText","RuiButton","_withModifiers","_withCtx","RuiFormTextDetail"],"sources":["../../../../src/components/forms/text-area/RuiTextArea.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiFieldLabel from '@/components/forms/field-label/RuiFieldLabel.vue';\nimport { textAreaStyles } from '@/components/forms/text-area/text-area-styles';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { type LabelPlacement, useLabelPlacement } from '@/composables/defaults/field';\nimport { usePrependAppendWidth } from '@/composables/forms/use-prepend-append-width';\nimport { useTimeoutManager } from '@/composables/timeout-manager';\nimport { useFormTextDetail } from '@/utils/form-text-detail';\nimport { getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\n\nexport interface TextAreaProps {\n label?: string;\n placeholder?: string;\n disabled?: boolean;\n /** Where the label shows; falls back to the nearest `RuiFieldDefaults`, then the app default, then `top`. /\n labelPlacement?: LabelPlacement;\n color?: ContextColorsType;\n textColor?: ContextColorsType;\n dense?: boolean;\n hint?: string;\n errorMessages?: string \| string[];\n successMessages?: string \| string[];\n hideDetails?: boolean;\n prependIcon?: RuiIcons;\n appendIcon?: RuiIcons;\n readonly?: boolean;\n clearable?: boolean;\n noResize?: boolean;\n minRows?: number \| string;\n maxRows?: number \| string;\n rowHeight?: number \| string;\n autoGrow?: boolean;\n required?: boolean;\n}\n\ndefineOptions({\n name: 'RuiTextArea',\n inheritAttrs: false,\n});\n\nconst modelValue = defineModel<string>({ required: true });\n\nconst {\n label = '',\n placeholder = '',\n disabled = false,\n labelPlacement = undefined,\n color = undefined,\n textColor = undefined,\n dense = false,\n hint = '',\n errorMessages = [],\n successMessages = [],\n hideDetails = false,\n prependIcon = undefined,\n appendIcon = undefined,\n readonly = false,\n clearable = false,\n noResize = false,\n minRows = 2,\n rowHeight = 1.5,\n maxRows = undefined,\n autoGrow = false,\n required = false,\n} = defineProps<TextAreaProps>();\n\nconst emit = defineEmits<{\n 'click:clear': [];\n}>();\n\ndefineSlots<{\n prepend?: () => any;\n append?: () => any;\n}>();\n\nconst isHovered = ref<boolean>(false);\nconst showClearButton = ref<boolean>(false);\n\nconst prepend = useTemplateRef<HTMLDivElement>('prepend');\nconst append = useTemplateRef<HTMLDivElement>('append');\nconst textarea = useTemplateRef<HTMLTextAreaElement>('textarea');\nconst textareaSizer = useTemplateRef<HTMLTextAreaElement>('textareaSizer');\n\nconst generatedId = useId();\nconst attrs = useAttrs();\n\nconst { focused } = useFocus(textarea);\nconst placement = useLabelPlacement(() => labelPlacement);\nconst { clear: cancelClearHide, create: delayClearHide } = useTimeoutManager();\nconst { prependWidth, appendWidth } = usePrependAppendWidth(prepend, append, 24);\nconst { hasError, hasSuccess, hasMessages, validation } = useFormTextDetail(\n () => errorMessages,\n () => successMessages,\n);\n\nconst textareaId = computed<string>(() => {\n const id = attrs.id;\n return typeof id === 'string' && id ? id : generatedId;\n});\n\nconst showClearIcon = computed<boolean>(() => clearable && !!get(modelValue) && !disabled && !readonly);\n\nconst effectiveTextColor = computed<ContextColorsType \| undefined>(() => {\n if (get(hasError))\n return 'error';\n if (get(hasSuccess))\n return 'success';\n if (textColor && !get(hasMessages))\n return textColor;\n return undefined;\n});\n\nconst effectiveColor = computed<ContextColorsType \| undefined>(() => get(validation) ?? color);\n\nconst ui = computed<ReturnType<typeof textAreaStyles>>(() => textAreaStyles({\n dense,\n disabled,\n readonly,\n noResize,\n hovered: get(isHovered),\n focused: get(focused),\n color: get(effectiveColor),\n textColor: get(effectiveTextColor),\n validation: get(validation),\n}));\n\nconst wrapperStyle = computed<Record<string, string>>(() => ({\n '--prepend-w': get(prependWidth),\n '--append-w': get(appendWidth),\n}));\n\nconst fieldStyles = computed<{ minHeight: string; maxHeight?: string }>(() => {\n const height = Number(rowHeight);\n const min = Number(minRows);\n const max = Number(maxRows);\n const value: { minHeight: string; maxHeight?: string } = {\n minHeight: `${min height + 0.75}rem`,\n };\n if (max)\n value.maxHeight = `${max * height + 0.75}rem`;\n\n return value;\n});\n\nfunction clearIconClicked(): void {\n set(modelValue, '');\n emit('click:clear');\n}\n\nfunction computeFieldHeight(newVal?: string, oldVal?: string): void {\n if (!autoGrow)\n return;\n\n const field = get(textarea);\n const fieldValue = newVal ?? get(modelValue);\n const fieldSizer = get(textareaSizer);\n if (!(field && fieldSizer))\n return;\n\n nextTick(() => {\n const sizerHeight = fieldSizer.scrollHeight;\n const fieldHeight = field.scrollHeight;\n let height = `${Math.max(sizerHeight, fieldHeight) / 16}rem`;\n if (oldVal && oldVal.length > fieldValue.length)\n height = `${Math.min(sizerHeight, fieldHeight) / 16}rem`;\n\n field.style.height = height;\n });\n}\n\nwatch(focused, (value) => {\n if (value) {\n // a refocus within the delay keeps the button\n cancelClearHide();\n set(showClearButton, true);\n }\n else {\n delayClearHide(() => set(showClearButton, false), 500);\n }\n});\n\nwatchDebounced(modelValue, computeFieldHeight, { debounce: 50 });\n\nonMounted(computeFieldHeight);\n\ndefineExpose({\n focus: () => get(textarea)?.focus(),\n element: textarea,\n});\n</script>\n\n<template>\n <div v-bind=\"getRootAttrs($attrs)\">\n <RuiFieldLabel\n v-if=\"label\"\n :text=\"label\"\n :for=\"textareaId\"\n :hidden=\"placement === 'hidden'\"\n :required=\"required\"\n :disabled=\"disabled\"\n />\n <div\n :class=\"ui.wrapper()\"\n :style=\"wrapperStyle\"\n data-id=\"wrapper\"\n @mouseenter=\"isHovered = true\"\n @mouseleave=\"isHovered = false\"\n >\n <div\n v-if=\"$slots.prepend \|\| prependIcon\"\n ref=\"prepend\"\n :class=\"ui.prepend()\"\n data-id=\"prepend\"\n >\n <slot\n v-if=\"$slots.prepend\"\n name=\"prepend\"\n />\n <div\n v-else-if=\"prependIcon\"\n :class=\"ui.icon()\"\n >\n <RuiIcon\n :name=\"prependIcon\"\n :size=\"18\"\n />\n </div>\n </div>\n <div :class=\"ui.inputWrapper()\">\n <textarea\n v-if=\"autoGrow\"\n ref=\"textareaSizer\"\n :value=\"modelValue\"\n :class=\"ui.textareaSizer()\"\n :style=\"fieldStyles\"\n aria-hidden=\"true\"\n disabled\n readonly\n />\n <textarea\n :id=\"textareaId\"\n ref=\"textarea\"\n v-model=\"modelValue\"\n :placeholder=\"placeholder \|\| ' '\"\n :class=\"ui.textarea()\"\n :style=\"fieldStyles\"\n :disabled=\"disabled\"\n :readonly=\"readonly\"\n :aria-invalid=\"hasError\"\n v-bind=\"getNonRootAttrs($attrs)\"\n />\n <fieldset :class=\"ui.fieldset()\" />\n </div>\n <div\n v-if=\"$slots.append \|\| appendIcon \|\| showClearIcon\"\n ref=\"append\"\n :class=\"ui.append()\"\n data-id=\"append\"\n >\n <RuiButton\n v-if=\"showClearIcon\"\n :class=\"[ui.clearButton(), { hidden: !showClearButton }]\"\n variant=\"text\"\n type=\"button\"\n icon\n data-id=\"clear-btn\"\n aria-label=\"Clear\"\n tabindex=\"-1\"\n @click.stop=\"clearIconClicked()\"\n >\n <RuiIcon\n name=\"lu-x\"\n size=\"16\"\n />\n </RuiButton>\n <slot\n v-if=\"$slots.append\"\n name=\"append\"\n />\n <div\n v-else-if=\"appendIcon\"\n :class=\"ui.icon()\"\n >\n <RuiIcon\n :name=\"appendIcon\"\n :size=\"18\"\n />\n </div>\n </div>\n </div>\n <RuiFormTextDetail\n v-if=\"!hideDetails\"\n :class=\"ui.details()\"\n :error-messages=\"errorMessages\"\n :success-messages=\"successMessages\"\n :hint=\"hint\"\n />\n </div>\n</template>\n"],"mappings":"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"}

package/dist/components/forms/text-field/RuiTextField.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RuiTextField.js","names":[],"sources":["../../../../src/components/forms/text-field/RuiTextField.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiFieldLabel from '@/components/forms/field-label/RuiFieldLabel.vue';\nimport { textFieldStyles } from '@/components/forms/text-field/text-field-styles';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { type LabelPlacement, useLabelPlacement } from '@/composables/defaults/field';\nimport { useTimeoutManager } from '@/composables/timeout-manager';\nimport { useFormTextDetail } from '@/utils/form-text-detail';\nimport { getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\n\nexport interface TextFieldProps {\n label?: string;\n placeholder?: string;\n disabled?: boolean;\n /** Where the label shows; falls back to the nearest `RuiFieldDefaults`, then the app default, then `top`. /\n labelPlacement?: LabelPlacement;\n color?: ContextColorsType;\n textColor?: ContextColorsType;\n dense?: boolean;\n hint?: string;\n errorMessages?: string \| string[];\n successMessages?: string \| string[];\n hideDetails?: boolean;\n prependIcon?: RuiIcons;\n appendIcon?: RuiIcons;\n readonly?: boolean;\n clearable?: boolean;\n required?: boolean;\n}\n\ndefineOptions({\n name: 'RuiTextField',\n inheritAttrs: false,\n});\n\nconst modelValue = defineModel<string>({ required: true });\n\nconst {\n label = '',\n placeholder = '',\n disabled = false,\n labelPlacement = undefined,\n color = undefined,\n textColor = undefined,\n dense = false,\n hint = '',\n errorMessages = [],\n successMessages = [],\n hideDetails = false,\n prependIcon = undefined,\n appendIcon = undefined,\n readonly = false,\n clearable = false,\n required = false,\n} = defineProps<TextFieldProps>();\n\nconst emit = defineEmits<{\n 'focus-input': [event: Event];\n 'blur': [event: Event];\n 'remove': [value: unknown];\n 'clear': [];\n}>();\n\ndefineSlots<{\n prepend?: () => any;\n append?: () => any;\n /* Rich hint content under the field, in place of the `hint` text; error and success messages still take precedence. */\n hint?: () => any;\n}>();\n\nconst isHovered = ref<boolean>(false);\nconst showClearButton = ref<boolean>(false);\n\nconst inputRef = useTemplateRef<HTMLInputElement>('inputRef');\n\nconst generatedId = useId();\nconst attrs = useAttrs();\n\nconst { focused } = useFocus(inputRef);\nconst placement = useLabelPlacement(() => labelPlacement);\nconst { clear: cancelClearHide, create: delayClearHide } = useTimeoutManager();\nconst { hasError, hasSuccess, hasMessages, validation } = useFormTextDetail(\n () => errorMessages,\n () => successMessages,\n);\n\nconst inputId = computed<string>(() => {\n const id = attrs.id;\n return typeof id === 'string' && id ? id : generatedId;\n});\n\nconst showClearIcon = computed<boolean>(() => clearable && !!get(modelValue) && !disabled && !readonly);\n\nconst effectiveTextColor = computed<ContextColorsType \| undefined>(() => {\n if (get(hasError))\n return 'error';\n if (get(hasSuccess))\n return 'success';\n if (textColor && !get(hasMessages))\n return textColor;\n return undefined;\n});\n\nconst effectiveColor = computed<ContextColorsType \| undefined>(() => get(validation) ?? color);\n\nconst ui = computed<ReturnType<typeof textFieldStyles>>(() => textFieldStyles({\n dense,\n disabled,\n readonly,\n hovered: get(isHovered),\n focused: get(focused),\n color: get(effectiveColor),\n textColor: get(effectiveTextColor),\n validation: get(validation),\n}));\n\nfunction input(event: Event): void {\n const target = event.target;\n if (target instanceof HTMLInputElement) {\n set(modelValue, target.value);\n }\n}\n\nfunction clearIconClicked(): void {\n set(modelValue, '');\n emit('clear');\n}\n\nwatch(focused, (value) => {\n if (value) {\n // a refocus within the delay keeps the button\n cancelClearHide();\n set(showClearButton, true);\n }\n else {\n delayClearHide(() => set(showClearButton, false), 500);\n }\n});\n\ndefineExpose({\n setSelectionRange: (start: number, end: number) => {\n get(inputRef)?.setSelectionRange(start, end);\n },\n focus: () => get(inputRef)?.focus(),\n element: inputRef,\n});\n</script>\n\n<template>\n <div v-bind=\"getRootAttrs($attrs)\">\n <RuiFieldLabel\n v-if=\"label\"\n :text=\"label\"\n :for=\"inputId\"\n :hidden=\"placement === 'hidden'\"\n :required=\"required\"\n :disabled=\"disabled\"\n />\n <div\n :class=\"ui.wrapper()\"\n data-id=\"wrapper\"\n @mouseenter=\"isHovered = true\"\n @mouseleave=\"isHovered = false\"\n >\n <div\n v-if=\"$slots.prepend \|\| prependIcon\"\n :class=\"ui.prepend()\"\n data-id=\"prepend\"\n >\n <slot\n v-if=\"$slots.prepend\"\n name=\"prepend\"\n />\n <div\n v-else-if=\"prependIcon\"\n :class=\"ui.icon()\"\n >\n <RuiIcon\n :name=\"prependIcon\"\n :size=\"18\"\n />\n </div>\n </div>\n <div\n :class=\"ui.inputWrapper()\"\n @click=\"emit('focus-input', $event)\"\n >\n <input\n :id=\"inputId\"\n ref=\"inputRef\"\n :value=\"modelValue\"\n :placeholder=\"placeholder \|\| ' '\"\n :class=\"ui.input()\"\n :disabled=\"disabled\"\n :readonly=\"readonly\"\n :aria-invalid=\"hasError\"\n v-bind=\"getNonRootAttrs($attrs)\"\n @input=\"input($event)\"\n @blur=\"emit('blur', $event)\"\n @remove=\"emit('remove', $event)\"\n />\n <fieldset :class=\"ui.fieldset()\" />\n </div>\n <div\n v-if=\"$slots.append \|\| appendIcon \|\| showClearIcon\"\n :class=\"ui.append()\"\n data-id=\"append\"\n >\n <RuiButton\n v-if=\"showClearIcon\"\n :class=\"[ui.clearButton(), { hidden: !showClearButton }]\"\n variant=\"text\"\n type=\"button\"\n icon\n data-id=\"clear-btn\"\n aria-label=\"Clear\"\n tabindex=\"-1\"\n @click.stop=\"clearIconClicked()\"\n >\n <RuiIcon\n name=\"lu-x\"\n size=\"16\"\n />\n </RuiButton>\n <slot\n v-if=\"$slots.append\"\n name=\"append\"\n />\n <div\n v-else-if=\"appendIcon\"\n :class=\"ui.icon()\"\n >\n <RuiIcon\n :name=\"appendIcon\"\n :size=\"18\"\n />\n </div>\n </div>\n </div>\n <RuiFormTextDetail\n v-if=\"!hideDetails\"\n :class=\"ui.details()\"\n :error-messages=\"errorMessages\"\n :success-messages=\"successMessages\"\n :hint=\"hint\"\n >\n <template\n v-if=\"$slots.hint\"\n #hint\n >\n <slot name=\"hint\" />\n </template>\n </RuiFormTextDetail>\n </div>\n</template>\n"],"mappings":""}
1	+ {"version":3,"file":"RuiTextField.js","names":["_sfc_main"],"sources":["../../../../src/components/forms/text-field/RuiTextField.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiFieldLabel from '@/components/forms/field-label/RuiFieldLabel.vue';\nimport { textFieldStyles } from '@/components/forms/text-field/text-field-styles';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { type LabelPlacement, useLabelPlacement } from '@/composables/defaults/field';\nimport { useTimeoutManager } from '@/composables/timeout-manager';\nimport { useFormTextDetail } from '@/utils/form-text-detail';\nimport { getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\n\nexport interface TextFieldProps {\n label?: string;\n placeholder?: string;\n disabled?: boolean;\n /** Where the label shows; falls back to the nearest `RuiFieldDefaults`, then the app default, then `top`. /\n labelPlacement?: LabelPlacement;\n color?: ContextColorsType;\n textColor?: ContextColorsType;\n dense?: boolean;\n hint?: string;\n errorMessages?: string \| string[];\n successMessages?: string \| string[];\n hideDetails?: boolean;\n prependIcon?: RuiIcons;\n appendIcon?: RuiIcons;\n readonly?: boolean;\n clearable?: boolean;\n required?: boolean;\n}\n\ndefineOptions({\n name: 'RuiTextField',\n inheritAttrs: false,\n});\n\nconst modelValue = defineModel<string>({ required: true });\n\nconst {\n label = '',\n placeholder = '',\n disabled = false,\n labelPlacement = undefined,\n color = undefined,\n textColor = undefined,\n dense = false,\n hint = '',\n errorMessages = [],\n successMessages = [],\n hideDetails = false,\n prependIcon = undefined,\n appendIcon = undefined,\n readonly = false,\n clearable = false,\n required = false,\n} = defineProps<TextFieldProps>();\n\nconst emit = defineEmits<{\n 'focus-input': [event: Event];\n 'blur': [event: Event];\n 'remove': [value: unknown];\n 'clear': [];\n}>();\n\ndefineSlots<{\n prepend?: () => any;\n append?: () => any;\n /* Rich hint content under the field, in place of the `hint` text; error and success messages still take precedence. */\n hint?: () => any;\n}>();\n\nconst isHovered = ref<boolean>(false);\nconst showClearButton = ref<boolean>(false);\n\nconst inputRef = useTemplateRef<HTMLInputElement>('inputRef');\n\nconst generatedId = useId();\nconst attrs = useAttrs();\n\nconst { focused } = useFocus(inputRef);\nconst placement = useLabelPlacement(() => labelPlacement);\nconst { clear: cancelClearHide, create: delayClearHide } = useTimeoutManager();\nconst { hasError, hasSuccess, hasMessages, validation } = useFormTextDetail(\n () => errorMessages,\n () => successMessages,\n);\n\nconst inputId = computed<string>(() => {\n const id = attrs.id;\n return typeof id === 'string' && id ? id : generatedId;\n});\n\nconst showClearIcon = computed<boolean>(() => clearable && !!get(modelValue) && !disabled && !readonly);\n\nconst effectiveTextColor = computed<ContextColorsType \| undefined>(() => {\n if (get(hasError))\n return 'error';\n if (get(hasSuccess))\n return 'success';\n if (textColor && !get(hasMessages))\n return textColor;\n return undefined;\n});\n\nconst effectiveColor = computed<ContextColorsType \| undefined>(() => get(validation) ?? color);\n\nconst ui = computed<ReturnType<typeof textFieldStyles>>(() => textFieldStyles({\n dense,\n disabled,\n readonly,\n hovered: get(isHovered),\n focused: get(focused),\n color: get(effectiveColor),\n textColor: get(effectiveTextColor),\n validation: get(validation),\n}));\n\nfunction input(event: Event): void {\n const target = event.target;\n if (target instanceof HTMLInputElement) {\n set(modelValue, target.value);\n }\n}\n\nfunction clearIconClicked(): void {\n set(modelValue, '');\n emit('clear');\n}\n\nwatch(focused, (value) => {\n if (value) {\n // a refocus within the delay keeps the button\n cancelClearHide();\n set(showClearButton, true);\n }\n else {\n delayClearHide(() => set(showClearButton, false), 500);\n }\n});\n\ndefineExpose({\n setSelectionRange: (start: number, end: number) => {\n get(inputRef)?.setSelectionRange(start, end);\n },\n focus: () => get(inputRef)?.focus(),\n element: inputRef,\n});\n</script>\n\n<template>\n <div v-bind=\"getRootAttrs($attrs)\">\n <RuiFieldLabel\n v-if=\"label\"\n :text=\"label\"\n :for=\"inputId\"\n :hidden=\"placement === 'hidden'\"\n :required=\"required\"\n :disabled=\"disabled\"\n />\n <div\n :class=\"ui.wrapper()\"\n data-id=\"wrapper\"\n @mouseenter=\"isHovered = true\"\n @mouseleave=\"isHovered = false\"\n >\n <div\n v-if=\"$slots.prepend \|\| prependIcon\"\n :class=\"ui.prepend()\"\n data-id=\"prepend\"\n >\n <slot\n v-if=\"$slots.prepend\"\n name=\"prepend\"\n />\n <div\n v-else-if=\"prependIcon\"\n :class=\"ui.icon()\"\n >\n <RuiIcon\n :name=\"prependIcon\"\n :size=\"18\"\n />\n </div>\n </div>\n <div\n :class=\"ui.inputWrapper()\"\n @click=\"emit('focus-input', $event)\"\n >\n <input\n :id=\"inputId\"\n ref=\"inputRef\"\n :value=\"modelValue\"\n :placeholder=\"placeholder \|\| ' '\"\n :class=\"ui.input()\"\n :disabled=\"disabled\"\n :readonly=\"readonly\"\n :aria-invalid=\"hasError\"\n v-bind=\"getNonRootAttrs($attrs)\"\n @input=\"input($event)\"\n @blur=\"emit('blur', $event)\"\n @remove=\"emit('remove', $event)\"\n />\n <fieldset :class=\"ui.fieldset()\" />\n </div>\n <div\n v-if=\"$slots.append \|\| appendIcon \|\| showClearIcon\"\n :class=\"ui.append()\"\n data-id=\"append\"\n >\n <RuiButton\n v-if=\"showClearIcon\"\n :class=\"[ui.clearButton(), { hidden: !showClearButton }]\"\n variant=\"text\"\n type=\"button\"\n icon\n data-id=\"clear-btn\"\n aria-label=\"Clear\"\n tabindex=\"-1\"\n @click.stop=\"clearIconClicked()\"\n >\n <RuiIcon\n name=\"lu-x\"\n size=\"16\"\n />\n </RuiButton>\n <slot\n v-if=\"$slots.append\"\n name=\"append\"\n />\n <div\n v-else-if=\"appendIcon\"\n :class=\"ui.icon()\"\n >\n <RuiIcon\n :name=\"appendIcon\"\n :size=\"18\"\n />\n </div>\n </div>\n </div>\n <RuiFormTextDetail\n v-if=\"!hideDetails\"\n :class=\"ui.details()\"\n :error-messages=\"errorMessages\"\n :success-messages=\"successMessages\"\n :hint=\"hint\"\n >\n <template\n v-if=\"$slots.hint\"\n #hint\n >\n <slot name=\"hint\" />\n </template>\n </RuiFormTextDetail>\n </div>\n</template>\n"],"mappings":""}

package/dist/components/forms/text-field/RuiTextField.vue_vue_type_script_setup_true_lang.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RuiTextField.vue_vue_type_script_setup_true_lang.js","names":["$attrs","$slots"],"sources":["../../../../src/components/forms/text-field/RuiTextField.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiFieldLabel from '@/components/forms/field-label/RuiFieldLabel.vue';\nimport { textFieldStyles } from '@/components/forms/text-field/text-field-styles';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { type LabelPlacement, useLabelPlacement } from '@/composables/defaults/field';\nimport { useTimeoutManager } from '@/composables/timeout-manager';\nimport { useFormTextDetail } from '@/utils/form-text-detail';\nimport { getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\n\nexport interface TextFieldProps {\n label?: string;\n placeholder?: string;\n disabled?: boolean;\n /** Where the label shows; falls back to the nearest `RuiFieldDefaults`, then the app default, then `top`. /\n labelPlacement?: LabelPlacement;\n color?: ContextColorsType;\n textColor?: ContextColorsType;\n dense?: boolean;\n hint?: string;\n errorMessages?: string \| string[];\n successMessages?: string \| string[];\n hideDetails?: boolean;\n prependIcon?: RuiIcons;\n appendIcon?: RuiIcons;\n readonly?: boolean;\n clearable?: boolean;\n required?: boolean;\n}\n\ndefineOptions({\n name: 'RuiTextField',\n inheritAttrs: false,\n});\n\nconst modelValue = defineModel<string>({ required: true });\n\nconst {\n label = '',\n placeholder = '',\n disabled = false,\n labelPlacement = undefined,\n color = undefined,\n textColor = undefined,\n dense = false,\n hint = '',\n errorMessages = [],\n successMessages = [],\n hideDetails = false,\n prependIcon = undefined,\n appendIcon = undefined,\n readonly = false,\n clearable = false,\n required = false,\n} = defineProps<TextFieldProps>();\n\nconst emit = defineEmits<{\n 'focus-input': [event: Event];\n 'blur': [event: Event];\n 'remove': [value: unknown];\n 'clear': [];\n}>();\n\ndefineSlots<{\n prepend?: () => any;\n append?: () => any;\n /* Rich hint content under the field, in place of the `hint` text; error and success messages still take precedence. */\n hint?: () => any;\n}>();\n\nconst isHovered = ref<boolean>(false);\nconst showClearButton = ref<boolean>(false);\n\nconst inputRef = useTemplateRef<HTMLInputElement>('inputRef');\n\nconst generatedId = useId();\nconst attrs = useAttrs();\n\nconst { focused } = useFocus(inputRef);\nconst placement = useLabelPlacement(() => labelPlacement);\nconst { clear: cancelClearHide, create: delayClearHide } = useTimeoutManager();\nconst { hasError, hasSuccess, hasMessages, validation } = useFormTextDetail(\n () => errorMessages,\n () => successMessages,\n);\n\nconst inputId = computed<string>(() => {\n const id = attrs.id;\n return typeof id === 'string' && id ? id : generatedId;\n});\n\nconst showClearIcon = computed<boolean>(() => clearable && !!get(modelValue) && !disabled && !readonly);\n\nconst effectiveTextColor = computed<ContextColorsType \| undefined>(() => {\n if (get(hasError))\n return 'error';\n if (get(hasSuccess))\n return 'success';\n if (textColor && !get(hasMessages))\n return textColor;\n return undefined;\n});\n\nconst effectiveColor = computed<ContextColorsType \| undefined>(() => get(validation) ?? color);\n\nconst ui = computed<ReturnType<typeof textFieldStyles>>(() => textFieldStyles({\n dense,\n disabled,\n readonly,\n hovered: get(isHovered),\n focused: get(focused),\n color: get(effectiveColor),\n textColor: get(effectiveTextColor),\n validation: get(validation),\n}));\n\nfunction input(event: Event): void {\n const target = event.target;\n if (target instanceof HTMLInputElement) {\n set(modelValue, target.value);\n }\n}\n\nfunction clearIconClicked(): void {\n set(modelValue, '');\n emit('clear');\n}\n\nwatch(focused, (value) => {\n if (value) {\n // a refocus within the delay keeps the button\n cancelClearHide();\n set(showClearButton, true);\n }\n else {\n delayClearHide(() => set(showClearButton, false), 500);\n }\n});\n\ndefineExpose({\n setSelectionRange: (start: number, end: number) => {\n get(inputRef)?.setSelectionRange(start, end);\n },\n focus: () => get(inputRef)?.focus(),\n element: inputRef,\n});\n</script>\n\n<template>\n <div v-bind=\"getRootAttrs($attrs)\">\n <RuiFieldLabel\n v-if=\"label\"\n :text=\"label\"\n :for=\"inputId\"\n :hidden=\"placement === 'hidden'\"\n :required=\"required\"\n :disabled=\"disabled\"\n />\n <div\n :class=\"ui.wrapper()\"\n data-id=\"wrapper\"\n @mouseenter=\"isHovered = true\"\n @mouseleave=\"isHovered = false\"\n >\n <div\n v-if=\"$slots.prepend \|\| prependIcon\"\n :class=\"ui.prepend()\"\n data-id=\"prepend\"\n >\n <slot\n v-if=\"$slots.prepend\"\n name=\"prepend\"\n />\n <div\n v-else-if=\"prependIcon\"\n :class=\"ui.icon()\"\n >\n <RuiIcon\n :name=\"prependIcon\"\n :size=\"18\"\n />\n </div>\n </div>\n <div\n :class=\"ui.inputWrapper()\"\n @click=\"emit('focus-input', $event)\"\n >\n <input\n :id=\"inputId\"\n ref=\"inputRef\"\n :value=\"modelValue\"\n :placeholder=\"placeholder \|\| ' '\"\n :class=\"ui.input()\"\n :disabled=\"disabled\"\n :readonly=\"readonly\"\n :aria-invalid=\"hasError\"\n v-bind=\"getNonRootAttrs($attrs)\"\n @input=\"input($event)\"\n @blur=\"emit('blur', $event)\"\n @remove=\"emit('remove', $event)\"\n />\n <fieldset :class=\"ui.fieldset()\" />\n </div>\n <div\n v-if=\"$slots.append \|\| appendIcon \|\| showClearIcon\"\n :class=\"ui.append()\"\n data-id=\"append\"\n >\n <RuiButton\n v-if=\"showClearIcon\"\n :class=\"[ui.clearButton(), { hidden: !showClearButton }]\"\n variant=\"text\"\n type=\"button\"\n icon\n data-id=\"clear-btn\"\n aria-label=\"Clear\"\n tabindex=\"-1\"\n @click.stop=\"clearIconClicked()\"\n >\n <RuiIcon\n name=\"lu-x\"\n size=\"16\"\n />\n </RuiButton>\n <slot\n v-if=\"$slots.append\"\n name=\"append\"\n />\n <div\n v-else-if=\"appendIcon\"\n :class=\"ui.icon()\"\n >\n <RuiIcon\n :name=\"appendIcon\"\n :size=\"18\"\n />\n </div>\n </div>\n </div>\n <RuiFormTextDetail\n v-if=\"!hideDetails\"\n :class=\"ui.details()\"\n :error-messages=\"errorMessages\"\n :success-messages=\"successMessages\"\n :hint=\"hint\"\n >\n <template\n v-if=\"$slots.hint\"\n #hint\n >\n <slot name=\"hint\" />\n </template>\n </RuiFormTextDetail>\n </div>\n</template>\n"],"mappings":"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"}
1	+ {"version":3,"file":"RuiTextField.vue_vue_type_script_setup_true_lang.js","names":["$attrs","$slots","_useModel","_openBlock","_createElementBlock","_normalizeProps","_guardReactiveProps","_unref","_createBlock","RuiFieldLabel","_createCommentVNode","_createElementVNode","_normalizeClass","_renderSlot","_createVNode","RuiIcon","_mergeProps","RuiButton","_withModifiers","_withCtx","RuiFormTextDetail","_createSlots"],"sources":["../../../../src/components/forms/text-field/RuiTextField.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiFieldLabel from '@/components/forms/field-label/RuiFieldLabel.vue';\nimport { textFieldStyles } from '@/components/forms/text-field/text-field-styles';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { type LabelPlacement, useLabelPlacement } from '@/composables/defaults/field';\nimport { useTimeoutManager } from '@/composables/timeout-manager';\nimport { useFormTextDetail } from '@/utils/form-text-detail';\nimport { getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\n\nexport interface TextFieldProps {\n label?: string;\n placeholder?: string;\n disabled?: boolean;\n /** Where the label shows; falls back to the nearest `RuiFieldDefaults`, then the app default, then `top`. /\n labelPlacement?: LabelPlacement;\n color?: ContextColorsType;\n textColor?: ContextColorsType;\n dense?: boolean;\n hint?: string;\n errorMessages?: string \| string[];\n successMessages?: string \| string[];\n hideDetails?: boolean;\n prependIcon?: RuiIcons;\n appendIcon?: RuiIcons;\n readonly?: boolean;\n clearable?: boolean;\n required?: boolean;\n}\n\ndefineOptions({\n name: 'RuiTextField',\n inheritAttrs: false,\n});\n\nconst modelValue = defineModel<string>({ required: true });\n\nconst {\n label = '',\n placeholder = '',\n disabled = false,\n labelPlacement = undefined,\n color = undefined,\n textColor = undefined,\n dense = false,\n hint = '',\n errorMessages = [],\n successMessages = [],\n hideDetails = false,\n prependIcon = undefined,\n appendIcon = undefined,\n readonly = false,\n clearable = false,\n required = false,\n} = defineProps<TextFieldProps>();\n\nconst emit = defineEmits<{\n 'focus-input': [event: Event];\n 'blur': [event: Event];\n 'remove': [value: unknown];\n 'clear': [];\n}>();\n\ndefineSlots<{\n prepend?: () => any;\n append?: () => any;\n /* Rich hint content under the field, in place of the `hint` text; error and success messages still take precedence. */\n hint?: () => any;\n}>();\n\nconst isHovered = ref<boolean>(false);\nconst showClearButton = ref<boolean>(false);\n\nconst inputRef = useTemplateRef<HTMLInputElement>('inputRef');\n\nconst generatedId = useId();\nconst attrs = useAttrs();\n\nconst { focused } = useFocus(inputRef);\nconst placement = useLabelPlacement(() => labelPlacement);\nconst { clear: cancelClearHide, create: delayClearHide } = useTimeoutManager();\nconst { hasError, hasSuccess, hasMessages, validation } = useFormTextDetail(\n () => errorMessages,\n () => successMessages,\n);\n\nconst inputId = computed<string>(() => {\n const id = attrs.id;\n return typeof id === 'string' && id ? id : generatedId;\n});\n\nconst showClearIcon = computed<boolean>(() => clearable && !!get(modelValue) && !disabled && !readonly);\n\nconst effectiveTextColor = computed<ContextColorsType \| undefined>(() => {\n if (get(hasError))\n return 'error';\n if (get(hasSuccess))\n return 'success';\n if (textColor && !get(hasMessages))\n return textColor;\n return undefined;\n});\n\nconst effectiveColor = computed<ContextColorsType \| undefined>(() => get(validation) ?? color);\n\nconst ui = computed<ReturnType<typeof textFieldStyles>>(() => textFieldStyles({\n dense,\n disabled,\n readonly,\n hovered: get(isHovered),\n focused: get(focused),\n color: get(effectiveColor),\n textColor: get(effectiveTextColor),\n validation: get(validation),\n}));\n\nfunction input(event: Event): void {\n const target = event.target;\n if (target instanceof HTMLInputElement) {\n set(modelValue, target.value);\n }\n}\n\nfunction clearIconClicked(): void {\n set(modelValue, '');\n emit('clear');\n}\n\nwatch(focused, (value) => {\n if (value) {\n // a refocus within the delay keeps the button\n cancelClearHide();\n set(showClearButton, true);\n }\n else {\n delayClearHide(() => set(showClearButton, false), 500);\n }\n});\n\ndefineExpose({\n setSelectionRange: (start: number, end: number) => {\n get(inputRef)?.setSelectionRange(start, end);\n },\n focus: () => get(inputRef)?.focus(),\n element: inputRef,\n});\n</script>\n\n<template>\n <div v-bind=\"getRootAttrs($attrs)\">\n <RuiFieldLabel\n v-if=\"label\"\n :text=\"label\"\n :for=\"inputId\"\n :hidden=\"placement === 'hidden'\"\n :required=\"required\"\n :disabled=\"disabled\"\n />\n <div\n :class=\"ui.wrapper()\"\n data-id=\"wrapper\"\n @mouseenter=\"isHovered = true\"\n @mouseleave=\"isHovered = false\"\n >\n <div\n v-if=\"$slots.prepend \|\| prependIcon\"\n :class=\"ui.prepend()\"\n data-id=\"prepend\"\n >\n <slot\n v-if=\"$slots.prepend\"\n name=\"prepend\"\n />\n <div\n v-else-if=\"prependIcon\"\n :class=\"ui.icon()\"\n >\n <RuiIcon\n :name=\"prependIcon\"\n :size=\"18\"\n />\n </div>\n </div>\n <div\n :class=\"ui.inputWrapper()\"\n @click=\"emit('focus-input', $event)\"\n >\n <input\n :id=\"inputId\"\n ref=\"inputRef\"\n :value=\"modelValue\"\n :placeholder=\"placeholder \|\| ' '\"\n :class=\"ui.input()\"\n :disabled=\"disabled\"\n :readonly=\"readonly\"\n :aria-invalid=\"hasError\"\n v-bind=\"getNonRootAttrs($attrs)\"\n @input=\"input($event)\"\n @blur=\"emit('blur', $event)\"\n @remove=\"emit('remove', $event)\"\n />\n <fieldset :class=\"ui.fieldset()\" />\n </div>\n <div\n v-if=\"$slots.append \|\| appendIcon \|\| showClearIcon\"\n :class=\"ui.append()\"\n data-id=\"append\"\n >\n <RuiButton\n v-if=\"showClearIcon\"\n :class=\"[ui.clearButton(), { hidden: !showClearButton }]\"\n variant=\"text\"\n type=\"button\"\n icon\n data-id=\"clear-btn\"\n aria-label=\"Clear\"\n tabindex=\"-1\"\n @click.stop=\"clearIconClicked()\"\n >\n <RuiIcon\n name=\"lu-x\"\n size=\"16\"\n />\n </RuiButton>\n <slot\n v-if=\"$slots.append\"\n name=\"append\"\n />\n <div\n v-else-if=\"appendIcon\"\n :class=\"ui.icon()\"\n >\n <RuiIcon\n :name=\"appendIcon\"\n :size=\"18\"\n />\n </div>\n </div>\n </div>\n <RuiFormTextDetail\n v-if=\"!hideDetails\"\n :class=\"ui.details()\"\n :error-messages=\"errorMessages\"\n :success-messages=\"successMessages\"\n :hint=\"hint\"\n >\n <template\n v-if=\"$slots.hint\"\n #hint\n >\n <slot name=\"hint\" />\n </template>\n </RuiFormTextDetail>\n </div>\n</template>\n"],"mappings":"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"}

package/dist/components/helpers/RuiFormTextDetail.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RuiFormTextDetail.js","names":[],"sources":["../../../src/components/helpers/RuiFormTextDetail.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useFormTextDetail } from '@/utils/form-text-detail';\n\nconst {\n errorMessages = [],\n successMessages = [],\n hint = '',\n} = defineProps<{\n errorMessages?: string \| string[];\n successMessages?: string \| string[];\n hint?: string;\n}>();\n\ndefineSlots<{\n /** Rich hint content, shown in place of the `hint` text while there is no error or success message. */\n hint?: () => any;\n}>();\n\nconst { formattedErrorMessages, formattedSuccessMessages, hasError, hasSuccess } =\n useFormTextDetail(\n () => errorMessages,\n () => successMessages,\n );\n</script>\n\n<template>\n <TransitionGroup\n tag=\"div\"\n class=\"details min-h-6\"\n enter-from-class=\"opacity-0 -translate-y-2 h-0\"\n enter-active-class=\"transform transition\"\n enter-to-class=\"opacity-100 translate-y-0\"\n leave-from-class=\"opacity-100 -translate-y-2\"\n leave-active-class=\"transform transition\"\n leave-to-class=\"opacity-0 -translate-y-2 h-0\"\n ~~appear\n~~ >\n <div\n v-if=\"hasError\"\n key=\"error\"\n class=\"text-rui-error dark:text-rui-error-lighter text-caption\"\n >\n {{ formattedErrorMessages[0] }}\n </div>\n <div\n v-else-if=\"hasSuccess\"\n key=\"success\"\n class=\"text-rui-success text-caption\"\n >\n {{ formattedSuccessMessages[0] }}\n </div>\n <div\n v-else-if=\"$slots.hint \|\| hint\"\n key=\"hint\"\n class=\"text-rui-text-secondary text-caption\"\n >\n <slot name=\"hint\">\n {{ hint }}\n </slot>\n </div>\n </TransitionGroup>\n</template>\n"],"mappings":""}
1	+ {"version":3,"file":"RuiFormTextDetail.js","names":["_sfc_main"],"sources":["../../../src/components/helpers/RuiFormTextDetail.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useFormTextDetail } from '@/utils/form-text-detail';\n\nconst {\n errorMessages = [],\n successMessages = [],\n hint = '',\n} = defineProps<{\n errorMessages?: string \| string[];\n successMessages?: string \| string[];\n hint?: string;\n}>();\n\ndefineSlots<{\n /** Rich hint content, shown in place of the `hint` text while there is no error or success message. */\n hint?: () => any;\n}>();\n\nconst { formattedErrorMessages, formattedSuccessMessages, hasError, hasSuccess } =\n useFormTextDetail(\n () => errorMessages,\n () => successMessages,\n );\n</script>\n\n<template>\n <!-- No `appear`: a hint present on first render is in place when the field shows, rather than\n sliding in each time a dialog or page opens; only a change of message animates. -->\n <TransitionGroup\n tag=\"div\"\n class=\"details min-h-6\"\n enter-from-class=\"opacity-0 -translate-y-2 h-0\"\n enter-active-class=\"transform transition\"\n enter-to-class=\"opacity-100 translate-y-0\"\n leave-from-class=\"opacity-100 -translate-y-2\"\n leave-active-class=\"transform transition\"\n leave-to-class=\"opacity-0 -translate-y-2 h-0\"\n >\n <div\n v-if=\"hasError\"\n key=\"error\"\n class=\"text-rui-error dark:text-rui-error-lighter text-caption\"\n >\n {{ formattedErrorMessages[0] }}\n </div>\n <div\n v-else-if=\"hasSuccess\"\n key=\"success\"\n class=\"text-rui-success text-caption\"\n >\n {{ formattedSuccessMessages[0] }}\n </div>\n <div\n v-else-if=\"$slots.hint \|\| hint\"\n key=\"hint\"\n class=\"text-rui-text-secondary text-caption\"\n >\n <slot name=\"hint\">\n {{ hint }}\n </slot>\n </div>\n </TransitionGroup>\n</template>\n"],"mappings":""}

package/dist/components/helpers/RuiFormTextDetail.vue_vue_type_script_setup_true_lang.js CHANGED Viewed

@@ -31,8 +31,7 @@ var RuiFormTextDetail_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*
 				"enter-to-class": "opacity-100 translate-y-0",
 				"leave-from-class": "opacity-100 -translate-y-2",
 				"leave-active-class": "transform transition",
-				"leave-to-class": "opacity-0 -translate-y-2 h-0",
-				appear: ""
+				"leave-to-class": "opacity-0 -translate-y-2 h-0"
 			}, {
 				default: withCtx(() => [unref(hasError) ? (openBlock(), createElementBlock("div", _hoisted_1, toDisplayString(unref(formattedErrorMessages)[0]), 1)) : unref(hasSuccess) ? (openBlock(), createElementBlock("div", _hoisted_2, toDisplayString(unref(formattedSuccessMessages)[0]), 1)) : _ctx.$slots.hint || __props.hint ? (openBlock(), createElementBlock("div", _hoisted_3, [renderSlot(_ctx.$slots, "hint", {}, () => [createTextVNode(toDisplayString(__props.hint), 1)])])) : createCommentVNode("", true)]),
 				_: 3

package/dist/components/helpers/RuiFormTextDetail.vue_vue_type_script_setup_true_lang.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RuiFormTextDetail.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../src/components/helpers/RuiFormTextDetail.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useFormTextDetail } from '@/utils/form-text-detail';\n\nconst {\n errorMessages = [],\n successMessages = [],\n hint = '',\n} = defineProps<{\n errorMessages?: string \| string[];\n successMessages?: string \| string[];\n hint?: string;\n}>();\n\ndefineSlots<{\n /** Rich hint content, shown in place of the `hint` text while there is no error or success message. */\n hint?: () => any;\n}>();\n\nconst { formattedErrorMessages, formattedSuccessMessages, hasError, hasSuccess } =\n useFormTextDetail(\n () => errorMessages,\n () => successMessages,\n );\n</script>\n\n<template>\n <TransitionGroup\n tag=\"div\"\n class=\"details min-h-6\"\n enter-from-class=\"opacity-0 -translate-y-2 h-0\"\n enter-active-class=\"transform transition\"\n enter-to-class=\"opacity-100 translate-y-0\"\n leave-from-class=\"opacity-100 -translate-y-2\"\n leave-active-class=\"transform transition\"\n leave-to-class=\"opacity-0 -translate-y-2 h-0\"\n ~~appear\n~~ >\n <div\n v-if=\"hasError\"\n key=\"error\"\n class=\"text-rui-error dark:text-rui-error-lighter text-caption\"\n >\n {{ formattedErrorMessages[0] }}\n </div>\n <div\n v-else-if=\"hasSuccess\"\n key=\"success\"\n class=\"text-rui-success text-caption\"\n >\n {{ formattedSuccessMessages[0] }}\n </div>\n <div\n v-else-if=\"$slots.hint \|\| hint\"\n key=\"hint\"\n class=\"text-rui-text-secondary text-caption\"\n >\n <slot name=\"hint\">\n {{ hint }}\n </slot>\n </div>\n </TransitionGroup>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;EAkBA,MAAM,EAAE,wBAAwB,0BAA0B,UAAU,eAClE,wBACQ,QAAA,qBACA,QAAA,eACR;;~~GAIA~~,~~OAAA~~,UAAA,~~GAAA~~,~~YAkCkB~~,iBAAA;~~IAjChB~~,KAAI;IACJ,OAAM;IACN,oBAAiB;IACjB,sBAAmB;IACnB,kBAAe;IACf,oBAAiB;IACjB,sBAAmB;IACnB,kBAAe~~;IACf,QAAA~~;;~~IAEA~~,~~SAAA~~,cAMM,~~CALE~~,MAAA,QAAA,~~KADR~~,UAAA,~~GAAA~~,mBAMM,OANN,~~YAMM~~,~~gBADD~~,MAAA,sBAAA,CAAsB,CAAA,EAAA,GAAA,CAAA,~~KAGd~~,MAAA,UAAA,~~KADb~~,UAAA,~~GAAA~~,mBAMM,OANN,~~YAMM~~,~~gBADD~~,MAAA,wBAAA,CAAwB,CAAA,EAAA,GAAA,CAAA,~~KAGhBA~~,KAAAA,OAAO,QAAQ,QAAA,~~QAD5B~~,UAAA,~~GAAA~~,mBAQM,OARN,YAQM,~~CAHJ~~,WAEO,KAAA,QAAA,QAAA,CAAA,SAAA,~~CADF~~,~~gBAAA~~,gBAAA,QAAA,IAAI,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA"}
1	+ {"version":3,"file":"RuiFormTextDetail.vue_vue_type_script_setup_true_lang.js","names":["$slots","_openBlock","_createBlock","_TransitionGroup","_withCtx","_unref","_createElementBlock","_toDisplayString","_renderSlot","_createTextVNode","_createCommentVNode"],"sources":["../../../src/components/helpers/RuiFormTextDetail.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useFormTextDetail } from '@/utils/form-text-detail';\n\nconst {\n errorMessages = [],\n successMessages = [],\n hint = '',\n} = defineProps<{\n errorMessages?: string \| string[];\n successMessages?: string \| string[];\n hint?: string;\n}>();\n\ndefineSlots<{\n /** Rich hint content, shown in place of the `hint` text while there is no error or success message. */\n hint?: () => any;\n}>();\n\nconst { formattedErrorMessages, formattedSuccessMessages, hasError, hasSuccess } =\n useFormTextDetail(\n () => errorMessages,\n () => successMessages,\n );\n</script>\n\n<template>\n <!-- No `appear`: a hint present on first render is in place when the field shows, rather than\n sliding in each time a dialog or page opens; only a change of message animates. -->\n <TransitionGroup\n tag=\"div\"\n class=\"details min-h-6\"\n enter-from-class=\"opacity-0 -translate-y-2 h-0\"\n enter-active-class=\"transform transition\"\n enter-to-class=\"opacity-100 translate-y-0\"\n leave-from-class=\"opacity-100 -translate-y-2\"\n leave-active-class=\"transform transition\"\n leave-to-class=\"opacity-0 -translate-y-2 h-0\"\n >\n <div\n v-if=\"hasError\"\n key=\"error\"\n class=\"text-rui-error dark:text-rui-error-lighter text-caption\"\n >\n {{ formattedErrorMessages[0] }}\n </div>\n <div\n v-else-if=\"hasSuccess\"\n key=\"success\"\n class=\"text-rui-success text-caption\"\n >\n {{ formattedSuccessMessages[0] }}\n </div>\n <div\n v-else-if=\"$slots.hint \|\| hint\"\n key=\"hint\"\n class=\"text-rui-text-secondary text-caption\"\n >\n <slot name=\"hint\">\n {{ hint }}\n </slot>\n </div>\n </TransitionGroup>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;EAkBA,MAAM,EAAE,wBAAwB,0BAA0B,UAAU,eAClE,wBACQ,QAAA,qBACA,QAAA,eACR;;GAMA,OAAAC,UAAA,GAAAC,YAiCkBC,iBAAA;IAhChB,KAAI;IACJ,OAAM;IACN,oBAAiB;IACjB,sBAAmB;IACnB,kBAAe;IACf,oBAAiB;IACjB,sBAAmB;IACnB,kBAAe;;IAEf,SAAAC,cAMM,CALEC,MAAA,QAAA,KADRJ,UAAA,GAAAK,mBAMM,OANN,YAMMC,gBADDF,MAAA,sBAAA,CAAsB,CAAA,EAAA,GAAA,CAAA,KAGdA,MAAA,UAAA,KADbJ,UAAA,GAAAK,mBAMM,OANN,YAMMC,gBADDF,MAAA,wBAAA,CAAwB,CAAA,EAAA,GAAA,CAAA,KAGhBL,KAAAA,OAAO,QAAQ,QAAA,QAD5BC,UAAA,GAAAK,mBAQM,OARN,YAQM,CAHJE,WAEO,KAAA,QAAA,QAAA,CAAA,SAAA,CADFC,gBAAAF,gBAAA,QAAA,IAAI,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA"}

package/dist/components/icons/RuiIcon.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RuiIcon.js","names":[],"sources":["../../../src/components/icons/RuiIcon.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ClassValue } from 'vue';\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport { objectOmit } from '@vueuse/shared';\nimport { useIcons } from '@/composables/icons';\nimport { cn, tv } from '@/utils/tv';\n\nexport interface Props {\n name: RuiIcons;\n size?: number \| string;\n color?: ContextColorsType;\n}\n\ndefineOptions({\n name: 'RuiIcon',\n // A fallthrough class would land beside the variant classes and leave the cascade to break the tie; `ui` merges instead\n inheritAttrs: false,\n});\n\nconst { name, size, color } = defineProps<Props>();\n\nconst { registeredIcons } = useIcons();\n\ntype SvgComponent = [tag: string, attrs: Record<string, string>];\n\n/*\n The icon's box is always driven by `--rui-icon-size`, so flex shrinking is\n * never wanted: `shrink-0` keeps the size beside a long grow sibling,\n * such as a `w-full` button label in `variant=\"list\"`. Without it the svg is\n * compressed along the main axis while its height stays put, drawing a sliver\n * of a glyph.\n \n The stroke is set on the svg as CSS, so `--rui-icon-stroke` can retune it.\n * Lucide's 2 reads heavy beside Inter; 1.5 would draw a 16px glyph at a\n * single, blurry pixel.\n /\nconst iconStyles = tv({\n base: 'shrink-0 w-(--rui-icon-size,1.5rem) h-(--rui-icon-size,1.5rem) [stroke-width:var(--rui-icon-stroke,1.75)]',\n variants: {\n color: {\n primary: 'text-rui-primary',\n secondary: 'text-rui-secondary',\n error: 'text-rui-error',\n warning: 'text-rui-warning',\n info: 'text-rui-info',\n success: 'text-rui-success',\n },\n },\n});\n\nconst hasExplicitSize = computed<boolean>(() => size !== undefined);\n\nfunction ui(attrsClass: ClassValue): string {\n return iconStyles({ color, class: cn(attrsClass) });\n}\n\n/\n The `size` prop as an inline CSS custom property on the svg. Inline style\n * beats any inherited value for the same property on this element, so a\n * consumer's size beats the button's `--rui-icon-size` without !important.\n \n A bare number is coerced to px, including the numeric string a template\n * binding like `:size=\"16\"` resolves to, while a value that already carries a\n * unit passes through. CSS needs that coercion; the `width`/`height`\n * presentation attributes this replaced treated bare numbers as px themselves.\n /\nconst sizeStyle = computed<Record<string, string> \| undefined>(() => {\n if (!get(hasExplicitSize))\n return undefined;\n const raw = String(size);\n const value = /^\\d+(?:\\.\\d+)?$/.test(raw) ? `${raw}px` : raw;\n return { '--rui-icon-size': value };\n});\n\~~nconst isFill = computed<boolean>(() => name.endsWith('-fill'));\~~n\n/\n What is registered is the only thing that matters here. An app may register\n * its own icons through `createRui(\\{ theme: \\{ icons \\} \\})`, brand logos\n * among them since the library carries none, and those names never appear in\n * the generated `RuiIcons` list. Validating against that list warned for\n * precisely the icons the registration API exists to support. A genuinely\n * unknown name is still caught by the check that decides whether anything\n * renders.\n */\nconst components = computed<SvgComponent[] \| undefined>(() => {\n const found = registeredIcons[name];\n\n if (!found) {\n console.error(\n `Icons \"${name}\" not found. Make sure that you have register the icon when installing the RuiPlugin`,\n );\n }\n return found;\n});\n</script>\n\n<template>\n <svg\n aria-hidden=\"true\"\n class=\"rui-icon\"\n :class=\"ui($attrs.class)\"\n :style=\"sizeStyle\"\n viewBox=\"0 0 24 24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n v-bind=\"objectOmit($attrs, ['class'])\"\n >\n <component\n :is=\"component[0]\"\n v-for=\"(component, index) in components\"\n :key=\"index\"\n v-bind=\"component[1]\"\n :fill=\"!isFill ? 'none' : 'currentColor'\"\n :stroke=\"!isFill ? 'currentColor' : 'none'\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n />\n </svg>\n</template>\n"],"mappings":""}
1	+ {"version":3,"file":"RuiIcon.js","names":["_sfc_main"],"sources":["../../../src/components/icons/RuiIcon.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ClassValue } from 'vue';\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport { objectOmit } from '@vueuse/shared';\nimport { useIcons } from '@/composables/icons';\nimport { cn, tv } from '@/utils/tv';\n\nexport interface Props {\n name: RuiIcons;\n size?: number \| string;\n color?: ContextColorsType;\n}\n\ndefineOptions({\n name: 'RuiIcon',\n // A fallthrough class would land beside the variant classes and leave the cascade to break the tie; `ui` merges instead\n inheritAttrs: false,\n});\n\nconst { name, size, color } = defineProps<Props>();\n\nconst { registeredIcons } = useIcons();\n\ntype SvgComponent = [tag: string, attrs: Record<string, string>];\n\n/*\n The icon's box is always driven by `--rui-icon-size`, so flex shrinking is\n * never wanted: `shrink-0` keeps the size beside a long grow sibling,\n * such as a `w-full` button label in `variant=\"list\"`. Without it the svg is\n * compressed along the main axis while its height stays put, drawing a sliver\n * of a glyph.\n \n The stroke is set on the svg as CSS, so `--rui-icon-stroke` can retune it.\n * Lucide's 2 reads heavy beside Inter; 1.5 would draw a 16px glyph at a\n * single, blurry pixel.\n \n The svg also carries the default paint, outlined in `currentColor`, and\n * every primitive inherits it unless it sets its own `fill` or `stroke`. That\n * is how lucide draws, so its solid dots (tag, palette) stay solid, and how an\n * icon mixes a stroked outline with a solid mark.\n /\nconst iconStyles = tv({\n base: 'shrink-0 w-(--rui-icon-size,1.5rem) h-(--rui-icon-size,1.5rem) [stroke-width:var(--rui-icon-stroke,1.75)]',\n variants: {\n color: {\n primary: 'text-rui-primary',\n secondary: 'text-rui-secondary',\n error: 'text-rui-error',\n warning: 'text-rui-warning',\n info: 'text-rui-info',\n success: 'text-rui-success',\n },\n },\n});\n\nconst hasExplicitSize = computed<boolean>(() => size !== undefined);\n\nfunction ui(attrsClass: ClassValue): string {\n return iconStyles({ color, class: cn(attrsClass) });\n}\n\n/\n The `size` prop as an inline CSS custom property on the svg. Inline style\n * beats any inherited value for the same property on this element, so a\n * consumer's size beats the button's `--rui-icon-size` without !important.\n \n A bare number is coerced to px, including the numeric string a template\n * binding like `:size=\"16\"` resolves to, while a value that already carries a\n * unit passes through. CSS needs that coercion; the `width`/`height`\n * presentation attributes this replaced treated bare numbers as px themselves.\n /\nconst sizeStyle = computed<Record<string, string> \| undefined>(() => {\n if (!get(hasExplicitSize))\n return undefined;\n const raw = String(size);\n const value = /^\\d+(?:\\.\\d+)?$/.test(raw) ? `${raw}px` : raw;\n return { '--rui-icon-size': value };\n});\n\n/\n What is registered is the only thing that matters here. An app may register\n * its own icons through `createRui(\\{ theme: \\{ icons \\} \\})`, brand logos\n * among them since the library carries none, and those names never appear in\n * the generated `RuiIcons` list. Validating against that list warned for\n * precisely the icons the registration API exists to support. A genuinely\n * unknown name is still caught by the check that decides whether anything\n * renders.\n */\nconst components = computed<SvgComponent[] \| undefined>(() => {\n const found = registeredIcons[name];\n\n if (!found) {\n console.error(\n `Icons \"${name}\" not found. Make sure that you have register the icon when installing the RuiPlugin`,\n );\n }\n return found;\n});\n</script>\n\n<template>\n <svg\n aria-hidden=\"true\"\n class=\"rui-icon\"\n :class=\"ui($attrs.class)\"\n :style=\"sizeStyle\"\n viewBox=\"0 0 24 24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n v-bind=\"objectOmit($attrs, ['class'])\"\n >\n <component\n :is=\"component[0]\"\n v-for=\"(component, index) in components\"\n :key=\"index\"\n v-bind=\"component[1]\"\n />\n </svg>\n</template>\n"],"mappings":""}

package/dist/components/icons/RuiIcon.vue_vue_type_script_setup_true_lang.js CHANGED Viewed

@@ -13,6 +13,11 @@ import { Fragment, computed, createBlock, createElementBlock, defineComponent, m
 * The stroke is set on the svg as CSS, so `--rui-icon-stroke` can retune it.
 * Lucide's 2 reads heavy beside Inter; 1.5 would draw a 16px glyph at a
 * single, blurry pixel.
+*
+* The svg also carries the default paint, outlined in `currentColor`, and
+* every primitive inherits it unless it sets its own `fill` or `stroke`. That
+* is how lucide draws, so its solid dots (tag, palette) stay solid, and how an
+* icon mixes a stroked outline with a solid mark.
 */
 var RuiIcon_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "RuiIcon",
@@ -58,7 +63,6 @@ var RuiIcon_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 			const raw = String(__props.size);
 			return { "--rui-icon-size": /^\d+(?:\.\d+)?$/.test(raw) ? `${raw}px` : raw };
 		});
-		const isFill = computed(() => __props.name.endsWith("-fill"));
 		/**
 		* What is registered is the only thing that matters here. An app may register
 		* its own icons through `createRui(\{ theme: \{ icons \} \})`, brand logos
@@ -79,16 +83,13 @@ var RuiIcon_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 				class: ["rui-icon", ui(_ctx.$attrs.class)],
 				style: unref(sizeStyle),
 				viewBox: "0 0 24 24",
-				xmlns: "http://www.w3.org/2000/svg"
+				xmlns: "http://www.w3.org/2000/svg",
+				fill: "none",
+				stroke: "currentColor",
+				"stroke-linecap": "round",
+				"stroke-linejoin": "round"
 			}, unref(objectOmit)(_ctx.$attrs, ["class"])), [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(components), (component, index) => {
-				return openBlock(), createBlock(resolveDynamicComponent(component[0]), mergeProps({ key: index }, { ref_for: true }, component[1], {
-					fill: !unref(isFill) ? "none" : "currentColor",
-					stroke: !unref(isFill) ? "currentColor" : "none",
-					"stroke-linecap": "round",
-					"stroke-linejoin": "round",
-					"fill-rule": "evenodd",
-					"clip-rule": "evenodd"
-				}), null, 16, ["fill", "stroke"]);
+				return openBlock(), createBlock(resolveDynamicComponent(component[0]), mergeProps({ key: index }, { ref_for: true }, component[1]), null, 16);
 			}), 128))], 16);
 		};
 	}

package/dist/components/icons/RuiIcon.vue_vue_type_script_setup_true_lang.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RuiIcon.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../src/components/icons/RuiIcon.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ClassValue } from 'vue';\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport { objectOmit } from '@vueuse/shared';\nimport { useIcons } from '@/composables/icons';\nimport { cn, tv } from '@/utils/tv';\n\nexport interface Props {\n name: RuiIcons;\n size?: number \| string;\n color?: ContextColorsType;\n}\n\ndefineOptions({\n name: 'RuiIcon',\n // A fallthrough class would land beside the variant classes and leave the cascade to break the tie; `ui` merges instead\n inheritAttrs: false,\n});\n\nconst { name, size, color } = defineProps<Props>();\n\nconst { registeredIcons } = useIcons();\n\ntype SvgComponent = [tag: string, attrs: Record<string, string>];\n\n/*\n The icon's box is always driven by `--rui-icon-size`, so flex shrinking is\n * never wanted: `shrink-0` keeps the size beside a long grow sibling,\n * such as a `w-full` button label in `variant=\"list\"`. Without it the svg is\n * compressed along the main axis while its height stays put, drawing a sliver\n * of a glyph.\n \n The stroke is set on the svg as CSS, so `--rui-icon-stroke` can retune it.\n * Lucide's 2 reads heavy beside Inter; 1.5 would draw a 16px glyph at a\n * single, blurry pixel.\n /\nconst iconStyles = tv({\n base: 'shrink-0 w-(--rui-icon-size,1.5rem) h-(--rui-icon-size,1.5rem) [stroke-width:var(--rui-icon-stroke,1.75)]',\n variants: {\n color: {\n primary: 'text-rui-primary',\n secondary: 'text-rui-secondary',\n error: 'text-rui-error',\n warning: 'text-rui-warning',\n info: 'text-rui-info',\n success: 'text-rui-success',\n },\n },\n});\n\nconst hasExplicitSize = computed<boolean>(() => size !== undefined);\n\nfunction ui(attrsClass: ClassValue): string {\n return iconStyles({ color, class: cn(attrsClass) });\n}\n\n/\n The `size` prop as an inline CSS custom property on the svg. Inline style\n * beats any inherited value for the same property on this element, so a\n * consumer's size beats the button's `--rui-icon-size` without !important.\n \n A bare number is coerced to px, including the numeric string a template\n * binding like `:size=\"16\"` resolves to, while a value that already carries a\n * unit passes through. CSS needs that coercion; the `width`/`height`\n * presentation attributes this replaced treated bare numbers as px themselves.\n /\nconst sizeStyle = computed<Record<string, string> \| undefined>(() => {\n if (!get(hasExplicitSize))\n return undefined;\n const raw = String(size);\n const value = /^\\d+(?:\\.\\d+)?$/.test(raw) ? `${raw}px` : raw;\n return { '--rui-icon-size': value };\n});\n\~~nconst isFill = computed<boolean>(() => name.endsWith('-fill'));\~~n\n/\n What is registered is the only thing that matters here. An app may register\n * its own icons through `createRui(\\{ theme: \\{ icons \\} \\})`, brand logos\n * among them since the library carries none, and those names never appear in\n * the generated `RuiIcons` list. Validating against that list warned for\n * precisely the icons the registration API exists to support. A genuinely\n * unknown name is still caught by the check that decides whether anything\n * renders.\n */\nconst components = computed<SvgComponent[] \| undefined>(() => {\n const found = registeredIcons[name];\n\n if (!found) {\n console.error(\n `Icons \"${name}\" not found. Make sure that you have register the icon when installing the RuiPlugin`,\n );\n }\n return found;\n});\n</script>\n\n<template>\n <svg\n aria-hidden=\"true\"\n class=\"rui-icon\"\n :class=\"ui($attrs.class)\"\n :style=\"sizeStyle\"\n viewBox=\"0 0 24 24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n v-bind=\"objectOmit($attrs, ['class'])\"\n >\n <component\n :is=\"component[0]\"\n v-for=\"(component, index) in components\"\n :key=\"index\"\n v-bind=\"component[1]\"\n :fill=\"!isFill ? 'none' : 'currentColor'\"\n :stroke=\"!isFill ? 'currentColor' : 'none'\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n />\n </svg>\n</template>\n"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;~~EAsBA,MAAM,EAAE,oBAAoB,SAAS;~~EAerC~~,MAAM,aAAa,GAAG;GACpB,MAAM;GACN,UAAU,EACR,OAAO;IACL,SAAS;IACT,WAAW;IACX,OAAO;IACP,SAAS;IACT,MAAM;IACN,SAAS;GACX,EACF;EACF,CAAC;EAED,MAAM,kBAAkB,eAAwB,QAAA,SAAS,KAAA,CAAS;EAElE,SAAS,GAAG,YAAgC;GAC1C,OAAO,WAAW;IAAE,OAAI,QAAA;IAAG,OAAO,GAAG,UAAU;GAAE,CAAC;EACpD;;;;;;;;;;;EAYA,MAAM,YAAY,eAAmD;GACnE,IAAI,CAAC,IAAI,eAAe,GACtB,OAAO,KAAA;GACT,MAAM,MAAM,OAAO,QAAA,IAAI;GAEvB,OAAO,EAAE,mBADK,kBAAkB,KAAK,GAAG,IAAI,GAAG,IAAI,MAAM,IACvB;EACpC,CAAC~~;EAED,MAAM,SAAS,eAAwB,QAAA,KAAK,SAAS,OAAO,CAAC~~;;;;;;;;;;~~EAW7D~~,MAAM,aAAa,eAA2C;GAC5D,MAAM,QAAQ,gBAAgB,QAAA;GAE9B,IAAI,CAAC,OACH,QAAQ,MACN,UAAU,QAAA,KAAK,qFACjB;GAEF,OAAO;EACT,CAAC;;GAIC,~~OAAA~~,UAAA,~~GAAA~~,~~mBAqBM~~,~~OArBN~~,~~WAqBM~~;~~IApBJ~~,eAAY;IACZ,OAAK,CAAC,YACE,~~GAAGA~~,KAAAA,OAAO,KAAK,CAAA;IACtB,~~OAAO~~,MAAA,SAAA;IACR,SAAQ;IACR,OAAM;~~GACE~~,~~GAAA~~,MAAA,UAAA,CAAU,~~CAACA~~,KAAAA,QAAM,CAAA,OAAA,CAAA,CAAA,GAAA,~~EAEzB~~,UAAA,IAAA,~~GAAA~~,~~mBAWE~~,UAAA,~~MAAA~~,~~WAT6B~~,MAAA,UAAA,IAArB,WAAW,UAAK;IAF1B,~~OAAA~~,UAAA,~~GAAA~~,~~YAWE~~,~~wBAVK~~,UAAS,EAAA,~~GADhB~~,~~WAWE~~,~~EARC~~,KAAK,MAAK,GAAA,EAAA,SAAA,KAAA,GACH,UAAS,~~IAAA;KAChB~~,~~MAAI~~,~~CAAG,~~MAAA,~~MAAA,IAAM,SAAA;KACb,QAAM,CAAG,MAAA,MAAA,IAAM,iBAAA;KAChB,kBAAe;KACf,mBAAgB;KAChB,aAAU;KACV,aAAU~~"}
1	+ {"version":3,"file":"RuiIcon.vue_vue_type_script_setup_true_lang.js","names":["$attrs","_openBlock","_createElementBlock","_mergeProps","_unref","_Fragment","_renderList","_createBlock","_resolveDynamicComponent"],"sources":["../../../src/components/icons/RuiIcon.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ClassValue } from 'vue';\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport { objectOmit } from '@vueuse/shared';\nimport { useIcons } from '@/composables/icons';\nimport { cn, tv } from '@/utils/tv';\n\nexport interface Props {\n name: RuiIcons;\n size?: number \| string;\n color?: ContextColorsType;\n}\n\ndefineOptions({\n name: 'RuiIcon',\n // A fallthrough class would land beside the variant classes and leave the cascade to break the tie; `ui` merges instead\n inheritAttrs: false,\n});\n\nconst { name, size, color } = defineProps<Props>();\n\nconst { registeredIcons } = useIcons();\n\ntype SvgComponent = [tag: string, attrs: Record<string, string>];\n\n/*\n The icon's box is always driven by `--rui-icon-size`, so flex shrinking is\n * never wanted: `shrink-0` keeps the size beside a long grow sibling,\n * such as a `w-full` button label in `variant=\"list\"`. Without it the svg is\n * compressed along the main axis while its height stays put, drawing a sliver\n * of a glyph.\n \n The stroke is set on the svg as CSS, so `--rui-icon-stroke` can retune it.\n * Lucide's 2 reads heavy beside Inter; 1.5 would draw a 16px glyph at a\n * single, blurry pixel.\n \n The svg also carries the default paint, outlined in `currentColor`, and\n * every primitive inherits it unless it sets its own `fill` or `stroke`. That\n * is how lucide draws, so its solid dots (tag, palette) stay solid, and how an\n * icon mixes a stroked outline with a solid mark.\n /\nconst iconStyles = tv({\n base: 'shrink-0 w-(--rui-icon-size,1.5rem) h-(--rui-icon-size,1.5rem) [stroke-width:var(--rui-icon-stroke,1.75)]',\n variants: {\n color: {\n primary: 'text-rui-primary',\n secondary: 'text-rui-secondary',\n error: 'text-rui-error',\n warning: 'text-rui-warning',\n info: 'text-rui-info',\n success: 'text-rui-success',\n },\n },\n});\n\nconst hasExplicitSize = computed<boolean>(() => size !== undefined);\n\nfunction ui(attrsClass: ClassValue): string {\n return iconStyles({ color, class: cn(attrsClass) });\n}\n\n/\n The `size` prop as an inline CSS custom property on the svg. Inline style\n * beats any inherited value for the same property on this element, so a\n * consumer's size beats the button's `--rui-icon-size` without !important.\n \n A bare number is coerced to px, including the numeric string a template\n * binding like `:size=\"16\"` resolves to, while a value that already carries a\n * unit passes through. CSS needs that coercion; the `width`/`height`\n * presentation attributes this replaced treated bare numbers as px themselves.\n /\nconst sizeStyle = computed<Record<string, string> \| undefined>(() => {\n if (!get(hasExplicitSize))\n return undefined;\n const raw = String(size);\n const value = /^\\d+(?:\\.\\d+)?$/.test(raw) ? `${raw}px` : raw;\n return { '--rui-icon-size': value };\n});\n\n/\n What is registered is the only thing that matters here. An app may register\n * its own icons through `createRui(\\{ theme: \\{ icons \\} \\})`, brand logos\n * among them since the library carries none, and those names never appear in\n * the generated `RuiIcons` list. Validating against that list warned for\n * precisely the icons the registration API exists to support. A genuinely\n * unknown name is still caught by the check that decides whether anything\n * renders.\n */\nconst components = computed<SvgComponent[] \| undefined>(() => {\n const found = registeredIcons[name];\n\n if (!found) {\n console.error(\n `Icons \"${name}\" not found. Make sure that you have register the icon when installing the RuiPlugin`,\n );\n }\n return found;\n});\n</script>\n\n<template>\n <svg\n aria-hidden=\"true\"\n class=\"rui-icon\"\n :class=\"ui($attrs.class)\"\n :style=\"sizeStyle\"\n viewBox=\"0 0 24 24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n v-bind=\"objectOmit($attrs, ['class'])\"\n >\n <component\n :is=\"component[0]\"\n v-for=\"(component, index) in components\"\n :key=\"index\"\n v-bind=\"component[1]\"\n />\n </svg>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAsBA,MAAM,EAAE,oBAAoB,SAAS;EAoBrC,MAAM,aAAa,GAAG;GACpB,MAAM;GACN,UAAU,EACR,OAAO;IACL,SAAS;IACT,WAAW;IACX,OAAO;IACP,SAAS;IACT,MAAM;IACN,SAAS;GACX,EACF;EACF,CAAC;EAED,MAAM,kBAAkB,eAAwB,QAAA,SAAS,KAAA,CAAS;EAElE,SAAS,GAAG,YAAgC;GAC1C,OAAO,WAAW;IAAE,OAAI,QAAA;IAAG,OAAO,GAAG,UAAU;GAAE,CAAC;EACpD;;;;;;;;;;;EAYA,MAAM,YAAY,eAAmD;GACnE,IAAI,CAAC,IAAI,eAAe,GACtB,OAAO,KAAA;GACT,MAAM,MAAM,OAAO,QAAA,IAAI;GAEvB,OAAO,EAAE,mBADK,kBAAkB,KAAK,GAAG,IAAI,GAAG,IAAI,MAAM,IACvB;EACpC,CAAC;;;;;;;;;;EAWD,MAAM,aAAa,eAA2C;GAC5D,MAAM,QAAQ,gBAAgB,QAAA;GAE9B,IAAI,CAAC,OACH,QAAQ,MACN,UAAU,QAAA,KAAK,qFACjB;GAEF,OAAO;EACT,CAAC;;GAIC,OAAAC,UAAA,GAAAC,mBAmBM,OAnBNC,WAmBM;IAlBJ,eAAY;IACZ,OAAK,CAAC,YACE,GAAGH,KAAAA,OAAO,KAAK,CAAA;IACtB,OAAOI,MAAA,SAAA;IACR,SAAQ;IACR,OAAM;IACN,MAAK;IACL,QAAO;IACP,kBAAe;IACf,mBAAgB;GACR,GAAAA,MAAA,UAAA,CAAU,CAACJ,KAAAA,QAAM,CAAA,OAAA,CAAA,CAAA,GAAA,EAEzBC,UAAA,IAAA,GAAAC,mBAKEG,UAAA,MAAAC,WAH6BF,MAAA,UAAA,IAArB,WAAW,UAAK;IAF1B,OAAAH,UAAA,GAAAM,YAKEC,wBAJK,UAAS,EAAA,GADhBL,WAKE,EAFC,KAAK,MAAK,GAAA,EAAA,SAAA,KAAA,GACH,UAAS,EAAA,GAAA,MAAA,EAAA"}