ui-thing 0.1.50 → 0.1.52
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +33 -0
- package/dist/index.js +406 -54
- package/dist/index.js.map +1 -1
- package/package.json +9 -9
- package/src/comps.ts +52 -4
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "ui-thing",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.52",
|
|
4
4
|
"description": "CLI used to add Nuxt 3 components to a project",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"cli",
|
|
@@ -42,15 +42,15 @@
|
|
|
42
42
|
"boxen": "^8.0.1",
|
|
43
43
|
"build": "^0.1.4",
|
|
44
44
|
"c12": "^2.0.1",
|
|
45
|
-
"commander": "^13.
|
|
45
|
+
"commander": "^13.1.0",
|
|
46
46
|
"defu": "^6.1.4",
|
|
47
47
|
"execa": "^9.5.2",
|
|
48
48
|
"figlet": "^1.8.0",
|
|
49
49
|
"fs-extra": "^11.3.0",
|
|
50
50
|
"kleur": "^4.1.5",
|
|
51
51
|
"lodash": "^4.17.21",
|
|
52
|
-
"nypm": "^0.
|
|
53
|
-
"ora": "^8.
|
|
52
|
+
"nypm": "^0.5.2",
|
|
53
|
+
"ora": "^8.2.0",
|
|
54
54
|
"prompts": "^2.4.2"
|
|
55
55
|
},
|
|
56
56
|
"devDependencies": {
|
|
@@ -58,14 +58,14 @@
|
|
|
58
58
|
"@ianvs/prettier-plugin-sort-imports": "^4.4.1",
|
|
59
59
|
"@types/figlet": "^1.7.0",
|
|
60
60
|
"@types/fs-extra": "^11.0.4",
|
|
61
|
-
"@types/lodash": "^4.17.
|
|
62
|
-
"@types/node": "^22.
|
|
61
|
+
"@types/lodash": "^4.17.15",
|
|
62
|
+
"@types/node": "^22.13.1",
|
|
63
63
|
"@types/prompts": "^2.4.9",
|
|
64
|
-
"@vitest/coverage-v8": "^
|
|
64
|
+
"@vitest/coverage-v8": "^3.0.5",
|
|
65
65
|
"magicast": "^0.3.5",
|
|
66
|
-
"tsup": "^8.3.
|
|
66
|
+
"tsup": "^8.3.6",
|
|
67
67
|
"typescript": "^5.7.3",
|
|
68
|
-
"vitest": "^
|
|
68
|
+
"vitest": "^3.0.5"
|
|
69
69
|
},
|
|
70
70
|
"publishConfig": {
|
|
71
71
|
"access": "public"
|
package/src/comps.ts
CHANGED
|
@@ -8,7 +8,7 @@ export default [
|
|
|
8
8
|
fileName: "Accordion/Accordion.vue",
|
|
9
9
|
dirPath: "app/components/Ui",
|
|
10
10
|
fileContent:
|
|
11
|
-
'<template>\n <AccordionRoot v-slot="rootSlotProps" v-bind="forwarded">\n <slot v-bind="rootSlotProps" :items="items">\n <template v-for="(item, i) in items" :key="i">\n <UiAccordionItem v-slot="itemSlotProps" :disabled="item.disabled" :value="item.value">\n <slot v-bind="{ ...itemSlotProps, ...rootSlotProps, items, item }" name="header">\n <UiAccordionHeader>\n <slot v-bind="{ ...itemSlotProps, ...rootSlotProps, items, item }" name="trigger">\n <UiAccordionTrigger :title="item.title" :icon="item.icon" />\n </slot>\n </UiAccordionHeader>\n </slot>\n <slot name="content" v-bind="{ ...itemSlotProps, ...rootSlotProps, items, item }">\n <UiAccordionContent :content="item.content" />\n </slot>\n </UiAccordionItem>\n </template>\n </slot>\n </AccordionRoot>\n</template>\n\n<script setup lang="ts">\n import { AccordionRoot, useForwardPropsEmits } from "radix-vue";\n import type { AccordionRootEmits, AccordionRootProps } from "radix-vue";\n\n export interface AccordionItem {\n title?: string;\n content?: string;\n value: string;\n disabled?: boolean;\n icon?: string;\n }\n\n const props = withDefaults(\n defineProps<\n AccordionRootProps & {\n items?: AccordionItem[];\n }\n >(),\n { type: "single", collapsible: true, items: () => [] }\n );\n\n const emits = defineEmits<AccordionRootEmits>();\n const forwarded = useForwardPropsEmits(reactiveOmit(props, "items"), emits);\n</script>\n',
|
|
11
|
+
'<template>\n <AccordionRoot v-slot="rootSlotProps" v-bind="forwarded">\n <slot v-bind="rootSlotProps" :items="items">\n <template v-for="(item, i) in items" :key="i">\n <UiAccordionItem v-slot="itemSlotProps" :disabled="item.disabled" :value="item.value">\n <slot v-bind="{ ...itemSlotProps, ...rootSlotProps, items, item }" name="header">\n <UiAccordionHeader>\n <slot v-bind="{ ...itemSlotProps, ...rootSlotProps, items, item }" name="trigger">\n <UiAccordionTrigger :title="item.title" :icon="item.icon" />\n </slot>\n </UiAccordionHeader>\n </slot>\n <slot name="content" v-bind="{ ...itemSlotProps, ...rootSlotProps, items, item }">\n <UiAccordionContent :content="item.content" />\n </slot>\n </UiAccordionItem>\n </template>\n </slot>\n </AccordionRoot>\n</template>\n\n<script setup lang="ts">\n import { AccordionRoot, useForwardPropsEmits } from "radix-vue";\n import type { AccordionRootEmits, AccordionRootProps } from "radix-vue";\n\n export interface AccordionItem {\n title?: string;\n content?: string;\n value: string;\n disabled?: boolean;\n icon?: string;\n [key: string]: any;\n }\n\n const props = withDefaults(\n defineProps<\n AccordionRootProps & {\n items?: AccordionItem[];\n }\n >(),\n { type: "single", collapsible: true, items: () => [] }\n );\n\n const emits = defineEmits<AccordionRootEmits>();\n const forwarded = useForwardPropsEmits(reactiveOmit(props, "items"), emits);\n</script>\n',
|
|
12
12
|
},
|
|
13
13
|
{
|
|
14
14
|
fileName: "Accordion/Content.vue",
|
|
@@ -32,7 +32,7 @@ export default [
|
|
|
32
32
|
fileName: "Accordion/Trigger.vue",
|
|
33
33
|
dirPath: "app/components/Ui",
|
|
34
34
|
fileContent:
|
|
35
|
-
'<template>\n <AccordionTrigger v-bind="forwarded" :class="styles({ class: props.class })">\n <slot :props="props">\n {{ title }}\n </slot>\n <slot name="icon" :props="props">\n <Icon
|
|
35
|
+
'<template>\n <AccordionTrigger v-bind="forwarded" :class="styles({ class: props.class })">\n <slot :props="props">\n {{ title }}\n </slot>\n <slot name="icon" :props="props">\n <Icon\n v-if="icon"\n mode="svg"\n :name="icon"\n class="h-4 w-4 shrink-0 transition-transform duration-200"\n />\n </slot>\n </AccordionTrigger>\n</template>\n\n<script lang="ts" setup>\n import { AccordionTrigger } from "radix-vue";\n import type { AccordionTriggerProps } from "radix-vue";\n\n const props = withDefaults(\n defineProps<\n AccordionTriggerProps & {\n /** Custom class(es) to add to the parent */\n class?: any;\n /** The title of the accordion trigger */\n title?: string;\n /** The icon to show next to the title */\n icon?: string;\n }\n >(),\n {\n class: undefined,\n title: "",\n icon: "lucide:chevron-down",\n }\n );\n\n const forwarded = reactiveOmit(props, "class", "icon", "title");\n\n const styles = tv({\n base: "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline focus-visible:rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background [&[data-state=open]>svg]:rotate-180",\n });\n</script>\n',
|
|
36
36
|
},
|
|
37
37
|
],
|
|
38
38
|
utils: [],
|
|
@@ -809,7 +809,6 @@ export default [
|
|
|
809
809
|
"datatables.net-searchbuilder-dt",
|
|
810
810
|
"datatables.net-fixedcolumns-dt",
|
|
811
811
|
"datatables.net-fixedheader-dt",
|
|
812
|
-
"datatables.net-colreorder-dt",
|
|
813
812
|
"datatables.net-select-dt",
|
|
814
813
|
"datatables.net-vue3",
|
|
815
814
|
"jszip",
|
|
@@ -1460,6 +1459,21 @@ export default [
|
|
|
1460
1459
|
composables: [],
|
|
1461
1460
|
plugins: [],
|
|
1462
1461
|
},
|
|
1462
|
+
{
|
|
1463
|
+
name: "Loader",
|
|
1464
|
+
value: "loader",
|
|
1465
|
+
files: [
|
|
1466
|
+
{
|
|
1467
|
+
fileName: "Loader.vue",
|
|
1468
|
+
dirPath: "app/components/Ui",
|
|
1469
|
+
fileContent:
|
|
1470
|
+
'<template>\n <TransitionFade :duration="500" appear tag="template">\n <Teleport v-if="fullPage && open" to="#teleports">\n <div :class="loaderStyles().backdrop({ class: backdropClass, fullPage })">\n <Icon :class="loaderStyles().icon({ class: props.class })" :name="props.icon" />\n <slot :open>{{ text }}</slot>\n </div>\n </Teleport>\n <div\n v-if="!fullPage && open"\n :class="loaderStyles().backdrop({ class: props.backdropClass, fullPage })"\n >\n <Icon :class="loaderStyles().icon({ class: props.class })" :name="props.icon" />\n <slot :open>{{ text }}</slot>\n </div>\n </TransitionFade>\n</template>\n\n<script lang="ts">\n import { useMagicKeys } from "@vueuse/core";\n import { useBodyScrollLock } from "radix-vue";\n import type { PrimitiveProps } from "radix-vue";\n\n export type LoaderProps = PrimitiveProps & {\n /**\n * The icon to display in the loader.\n *\n * @default "svg-spinners:bars-rotate-fade"\n */\n icon?: string;\n /**\n * The class to apply to the loader Icon\n */\n class?: any;\n /**\n * The class to apply to the backdrop\n */\n backdropClass?: any;\n /**\n * Whether the loader should take up the full page.\n *\n * When this is `true`, the loader will be displayed in a fixed position that covers the entire page. You can press the `esc` key to close the loader.\n */\n fullPage?: boolean;\n /**\n * Whether to lock the scroll when the loader is open.\n *\n * @default true\n */\n lockScroll?: boolean;\n /**\n * The role of the component.\n *\n * @default "progressbar"\n */\n role?: string;\n /**\n * The text to display in the loader.\n *\n * This is displayed below the loader icon.\n */\n text?: string;\n /**\n * Whether to close the loader when the `esc` key is pressed.\n *\n * @default true\n */\n closeOnEscape?: boolean;\n };\n\n export const loaderStyles = tv({\n slots: {\n icon: "size-5",\n backdrop: "flex flex-col items-center justify-center gap-3",\n },\n variants: {\n fullPage: {\n true: {\n backdrop:\n "pointer-events-auto fixed inset-0 z-[999] size-full bg-background/80 backdrop-blur-md",\n },\n false: {\n backdrop: "relative",\n },\n },\n },\n });\n</script>\n\n<script lang="ts" setup>\n defineOptions({ inheritAttrs: false });\n const props = withDefaults(defineProps<LoaderProps>(), {\n icon: "svg-spinners:bars-rotate-fade",\n role: "progressbar",\n closeOnEscape: true,\n });\n\n const open = defineModel<boolean>({ default: true });\n const isLocked = useBodyScrollLock();\n\n const { escape } = useMagicKeys();\n\n watchEffect(() => {\n if (props.fullPage && open.value && escape?.value && props.closeOnEscape) {\n open.value = false;\n }\n if (props.lockScroll && !open.value) {\n isLocked.value = false;\n }\n if (props.lockScroll && open.value) {\n isLocked.value = true;\n }\n });\n</script>\n',
|
|
1471
|
+
},
|
|
1472
|
+
],
|
|
1473
|
+
utils: [],
|
|
1474
|
+
composables: [],
|
|
1475
|
+
plugins: [],
|
|
1476
|
+
},
|
|
1463
1477
|
{
|
|
1464
1478
|
name: "Menubar",
|
|
1465
1479
|
value: "menubar",
|
|
@@ -2892,6 +2906,40 @@ export default [
|
|
|
2892
2906
|
composables: [],
|
|
2893
2907
|
plugins: [],
|
|
2894
2908
|
},
|
|
2909
|
+
{
|
|
2910
|
+
name: "Form Builder",
|
|
2911
|
+
value: "vee-form-builder",
|
|
2912
|
+
deps: ["@vee-validate/nuxt", "@morev/vue-transitions"],
|
|
2913
|
+
askValidator: true,
|
|
2914
|
+
nuxtModules: ["@vee-validate/nuxt", "@morev/vue-transitions/nuxt"],
|
|
2915
|
+
components: [
|
|
2916
|
+
"label",
|
|
2917
|
+
"vee-checkbox",
|
|
2918
|
+
"Vee-input",
|
|
2919
|
+
"divider",
|
|
2920
|
+
"vee-currency-input",
|
|
2921
|
+
"vee-date-field",
|
|
2922
|
+
"vee-textarea",
|
|
2923
|
+
"vee-file-input",
|
|
2924
|
+
"vee-multi-select",
|
|
2925
|
+
"vee-select",
|
|
2926
|
+
"vee-pin-input",
|
|
2927
|
+
"vee-tags-input",
|
|
2928
|
+
"vee-radio-group",
|
|
2929
|
+
"vee-vue-form-slider",
|
|
2930
|
+
],
|
|
2931
|
+
files: [
|
|
2932
|
+
{
|
|
2933
|
+
fileName: "FormBuilder/FormBuilder.vue",
|
|
2934
|
+
dirPath: "app/components/Ui",
|
|
2935
|
+
fileContent:
|
|
2936
|
+
'<template>\n <div>\n <template v-for="(field, index) in fields" :key="index">\n <template v-if="field.variant === \'Checkbox\'">\n <slot\n v-if="field.renderIf ? field.renderIf() : true"\n :name="field.slot ? field.slot : field.name"\n v-bind="field"\n >\n <div :class="field.wrapperClass">\n <UiVeeCheckbox v-bind="removeFields(field)" />\n </div>\n </slot>\n </template>\n <template v-if="field.variant === \'Input\'">\n <slot\n v-if="field.renderIf ? field.renderIf() : true"\n :name="field.slot ? field.slot : field.name"\n v-bind="field"\n >\n <div :class="field.wrapperClass">\n <UiVeeInput v-bind="removeFields(field)" />\n </div>\n </slot>\n </template>\n <template v-if="field.variant === \'Divider\'">\n <slot\n v-if="field.renderIf ? field.renderIf() : true"\n :name="field.slot ? field.slot : field.name"\n v-bind="field"\n >\n <div :class="field.wrapperClass">\n <UiDivider v-bind="removeFields(field)" />\n </div>\n </slot>\n </template>\n <template v-if="field.variant === \'CurrencyInput\'">\n <slot\n v-if="field.renderIf ? field.renderIf() : true"\n :name="field.slot ? field.slot : field.name"\n v-bind="field"\n >\n <div :class="field.wrapperClass">\n <UiVeeCurrencyInput v-bind="removeFields(field)" />\n </div>\n </slot>\n </template>\n <template v-if="field.variant === \'DateField\'">\n <slot\n v-if="field.renderIf ? field.renderIf() : true"\n :name="field.slot ? field.slot : field.name"\n v-bind="field"\n >\n <div :class="field.wrapperClass">\n <UiVeeDateField v-bind="removeFields(field)" />\n </div>\n </slot>\n </template>\n <template v-if="field.variant === \'Textarea\'">\n <slot\n v-if="field.renderIf ? field.renderIf() : true"\n :name="field.slot ? field.slot : field.name"\n v-bind="field"\n >\n <div :class="field.wrapperClass">\n <UiVeeTextarea v-bind="removeFields(field)" />\n </div>\n </slot>\n </template>\n <template v-if="field.variant === \'FileInput\'">\n <slot\n v-if="field.renderIf ? field.renderIf() : true"\n :name="field.slot ? field.slot : field.name"\n v-bind="field"\n >\n <div :class="field.wrapperClass">\n <UiVeeFileInput :name="field.name" v-bind="removeFields(field)" />\n </div>\n </slot>\n </template>\n <template v-if="field.variant === \'MultiSelect\'">\n <slot\n v-if="field.renderIf ? field.renderIf() : true"\n :name="field.slot ? field.slot : field.name"\n v-bind="field"\n >\n <div :class="field.wrapperClass">\n <UiVeeMultiSelect v-bind="removeFields(field)" />\n </div>\n </slot>\n </template>\n <template v-if="field.variant === \'Select\'">\n <slot\n v-if="field.renderIf ? field.renderIf() : true"\n :name="field.slot ? field.slot : field.name"\n v-bind="field"\n >\n <div :class="field.wrapperClass">\n <UiVeeSelect v-bind="removeFields(field)">\n <template v-for="(option, optIndex) in field.options" :key="optIndex">\n <option v-bind="option">{{ option.label }}</option>\n </template>\n </UiVeeSelect>\n </div>\n </slot>\n </template>\n <template v-if="field.variant === \'RadioGroup\'">\n <slot\n v-if="field.renderIf ? field.renderIf() : true"\n :name="field.slot ? field.slot : field.name"\n v-bind="field"\n >\n <div :class="field.wrapperClass">\n <UiVeeRadioGroup :name="field.name" v-bind="removeFields(field)">\n <template v-for="(option, optIndex) in field.options" :key="optIndex">\n <div class="mb-2 flex items-center gap-3">\n <UiRadioGroupItem :id="option.value" :value="option.value" />\n <UiLabel :for="option.value">{{ option.label }}</UiLabel>\n </div>\n </template>\n </UiVeeRadioGroup>\n </div>\n </slot>\n </template>\n <template v-if="field.variant === \'PinInput\'">\n <slot\n v-if="field.renderIf ? field.renderIf() : true"\n :name="field.slot ? field.slot : field.name"\n v-bind="field"\n >\n <div :class="field.wrapperClass">\n <UiVeePinInput v-bind="removeFields(field)" />\n </div>\n </slot>\n </template>\n <template v-if="field.variant === \'TagsInput\'">\n <slot\n v-if="field.renderIf ? field.renderIf() : true"\n :name="field.slot ? field.slot : field.name"\n v-bind="field"\n >\n <div :class="field.wrapperClass">\n <UiVeeTagsInput v-bind="removeFields(field)" />\n </div>\n </slot>\n </template>\n <template v-if="field.variant === \'VueformSlider\'">\n <slot\n v-if="field.renderIf ? field.renderIf() : true"\n :name="field.slot ? field.slot : field.name"\n v-bind="field"\n >\n <div :class="field.wrapperClass">\n <UiVeeVueFormSlider v-bind="removeFields(field)" />\n </div>\n </slot>\n </template>\n </template>\n </div>\n</template>\n\n<script lang="ts">\n export type FormBuilder = {\n description?: string;\n hint?: string;\n disabled?: boolean;\n label?: string;\n name: string;\n placeholder?: string;\n required?: boolean;\n type?: string;\n value?: any;\n rules?: any;\n class?: any;\n slot?: string;\n wrapperClass?: any;\n renderIf?: () => boolean;\n options?: any[];\n variant:\n | "Checkbox"\n | "Input"\n | "Divider"\n | "CurrencyInput"\n | "DateField"\n | "FileInput"\n | "Select"\n | "Textarea"\n | "MultiSelect"\n | "PinInput"\n | "TagsInput"\n | "RadioGroup"\n | "VueformSlider";\n [key: string]: any;\n };\n export type FormBuilderProps = {\n fields: FormBuilder[];\n };\n</script>\n<script lang="ts" setup>\n defineProps<FormBuilderProps>();\n\n const omit = (obj: FormBuilder, keys: Array<keyof FormBuilder>) =>\n Object.fromEntries(\n Object.entries(obj).filter(([key]) => !keys.includes(key as keyof FormBuilder))\n );\n\n const removeFields = (field: FormBuilder) => {\n return omit(field, ["wrapperClass", "renderIf", "variant", "slot"]);\n };\n</script>\n',
|
|
2937
|
+
},
|
|
2938
|
+
],
|
|
2939
|
+
utils: [],
|
|
2940
|
+
composables: [],
|
|
2941
|
+
plugins: [],
|
|
2942
|
+
},
|
|
2895
2943
|
{
|
|
2896
2944
|
name: "Vee Input",
|
|
2897
2945
|
value: "vee-input",
|
|
@@ -3056,7 +3104,7 @@ export default [
|
|
|
3056
3104
|
fileName: "Vee/VueFormSlider.vue",
|
|
3057
3105
|
dirPath: "app/components/Ui",
|
|
3058
3106
|
fileContent:
|
|
3059
|
-
'<template>\n <Slider v-bind="{ ...forwarded, ...$attrs }" v-model="model" />\n
|
|
3107
|
+
'<template>\n <div class="w-full">\n <UiLabel\n v-if="label"\n :for="inputId"\n :class="[disabled && \'text-muted-foreground\', errorMessage && \'text-destructive\', \'mb-2\']"\n ><span>{{ label }} <span v-if="required" class="text-destructive">*</span></span></UiLabel\n >\n <Slider v-bind="{ ...forwarded, ...$attrs }" v-model="model" />\n <TransitionSlide group tag="div">\n <p v-if="hint && !errorMessage" key="hint" class="mt-1.5 text-sm text-muted-foreground">\n {{ hint }}\n </p>\n\n <p v-if="errorMessage" key="errorMessage" class="mt-1.5 text-sm text-destructive">\n {{ errorMessage }}\n </p>\n </TransitionSlide>\n </div>\n</template>\n\n<script lang="ts">\n import Slider from "@vueform/slider";\n import { useForwardPropsEmits } from "radix-vue";\n\n export type SliderFormatObject = {\n /**\n * Prefix to prepend to the value.\n * @example "$"\n */\n prefix?: string;\n /**\n * Suffix to append to the value.\n * @example "USD"\n */\n suffix?: string;\n /**\n * Number of decimals to show.\n * @example 2\n */\n decimals?: number;\n /**\n * Character to use as thousand separator.\n * @example ","\n */\n thousand?: string;\n };\n\n export interface SliderProps {\n /**\n * The hint to display below the slider.\n */\n hint?: string;\n /**\n * The rules for the slider. Used with vee-validate for validation.\n */\n rules?: any;\n /**\n * Whether the slider should be validated on mount.\n */\n validateOnMount?: boolean;\n /**\n * The label of the slider. Used with vee-validate for error messages\n */\n label?: string;\n /**\n * The name we want to give this slider in the form.\n */\n name?: string;\n /**\n * The id attribute of slider container DOM.\n * @default "slider"\n */\n id?: string;\n /**\n * Whether to update v-model only when the slider value is set and not while dragging.\n *\n * If disabled you must not use inline objects as props (eg. format, options, classes) but outsource them to a data property.\n *\n * @default true\n */\n lazy?: boolean;\n /**\n * Whether the slider should be disabled.\n * @default false\n */\n disabled?: boolean;\n /**\n * Minimum value of the slider.\n * @default 0\n */\n min?: number;\n /**\n * Maximum value of the slider.\n * @default 100\n */\n max?: number;\n /**\n * The jump between intervals. If `-1` it enables fractions (eg. `1.23`).\n * @default 1\n */\n step?: number;\n /**\n * Whether tooltips should show above handlers.\n * @default true\n */\n tooltips?: boolean;\n /**\n * When tooltips should be shown.\n * @default "always"\n */\n showTooltip?: "always" | "focus" | "drag";\n /**\n * The step distance between two handles when their tooltips should be merged (when step is `-1` then `1` is assumed).\n *\n * @example\n *\n * ```js\n * { merge: 5, step: 10 }\n * // values: 0, <=50 will merge\n * // values: 0, 60 will not merge\n *\n * { merge: 5, step: -1 }\n *\n * // values: 0, <=5 will merge\n * // values: 0, 5.01 will not merge\n *\n * ```\n * @default -1\n */\n merge?: number;\n /**\n * Formats the tooltip.\n *\n * It can be either a function that receives a `value` param and expects a string or number as return or an object with the following properties:\n *\n *\n * prefix - eg $ -> $100\n *\n * suffix - eg USD -> 100USD\n *\n * decimals - eg 2 -> 100.00\n *\n * thousand - eg , - 1,000\n */\n format?: SliderFormatObject | ((value: number) => string | number);\n /**\n * The orientation of the slider.\n * @default "horizontal"\n */\n orientation?: "horizontal" | "vertical";\n /**\n * The direction of the slider.\n *\n * By default value increases left-to-right and top-to-bottom, which is reversed when using `rtl`.\n *\n * @default "ltr"\n */\n direction?: "ltr" | "rtl";\n /**\n * The position of the slider tooltips.\n *\n * Possible values: `null` | `top` | `bottom` | `left` | `right` depending on orientation prop.\n *\n * When null it equals to orientation default (`top` for `horizontal` and `left` for `vertical`).\n * @default null\n */\n tooltipPosition?: null | "top" | "bottom" | "left" | "right";\n /**\n * An object containing aria attributes to be added for each handle.\n */\n aria?: Record<string, any>;\n /**\n * Sets the aria-labelledby attribute of handles.\n */\n ariaLabelledby?: string;\n /**\n * Additional options for noUiSlider.\n * @see https://refreshless.com/nouislider/slider-options/\n */\n options?: Record<string, any>;\n /**\n * Initial value of the slider.\n */\n modelValue?: any;\n value?: any;\n /**\n * An object of class names that gets merged with the default values\n */\n classes?: Record<string, any>;\n /**\n * Whether the slider is required.\n *\n * @default false\n */\n required?: boolean;\n }\n\n export type SliderEmits = {\n /**\n * Emitted when dragging the slider is finished or it\'s value changed by clicking, keyboard or programmatically set.\n */\n change: [v: any];\n /**\n * Emitted in the same scenarios as in `@change`, but also when the slider is being dragged if `lazy` option is disabled.\n */\n update: [v: any];\n /**\n * Emitted in the same scenarios as in `@change`, but also when the slider\'s `.set()` method is called.\n */\n set: [v: any];\n /**\n * Emitted while the slider moves.\n */\n slide: [v: any];\n /**\n * Emitted the slider connect moves while dragging.\n */\n drag: [v: any];\n /**\n * Emitted when the handle is activated and dragging started.\n */\n start: [v: any];\n /**\n * Emitted when the dragging ended.\n */\n end: [v: any];\n /**\n * Emitted when the slider\'s value is updated.\n */\n "update:modelValue": [v: any];\n };\n</script>\n<script lang="ts" setup>\n defineOptions({ inheritAttrs: false });\n const props = withDefaults(defineProps<SliderProps>(), {\n showTooltip: "drag",\n });\n\n const emits = defineEmits<SliderEmits>();\n\n const inputId = props.id || useId();\n\n const forwarded = useForwardPropsEmits(props, emits);\n\n const { errorMessage, value: model } = useField(\n () => props.name || props.id || useId(),\n props.rules,\n {\n initialValue: props.modelValue,\n label: props.label,\n validateOnMount: props.validateOnMount,\n syncVModel: true,\n }\n );\n</script>\n\n<style src="@vueform/slider/themes/default.css"></style>\n\n<style>\n :root {\n --slider-bg: theme(colors.muted.DEFAULT);\n --slider-connect-bg: theme(colors.primary.DEFAULT);\n --slider-connect-bg-disabled: theme(colors.primary.DEFAULT/45%);\n --slider-height: 8px;\n --slider-vertical-height: 300px;\n --slider-radius: 999999px;\n\n --slider-handle-bg: #ffffff;\n --slider-handle-border: 0;\n --slider-handle-width: 20px;\n --slider-handle-height: 20px;\n --slider-handle-radius: 99999px;\n --slider-handle-shadow: 0.5px 0.5px 2px 1px rgba(0, 0, 0, 0.32);\n --slider-handle-shadow-active: 0.5px 0.5px 2px 1px rgba(0, 0, 0, 0.42);\n --slider-handle-ring-width: 3px;\n --slider-handle-ring-color: theme(colors.primary.DEFAULT/20%);\n\n --slider-tooltip-font-size: 0.875rem;\n --slider-tooltip-line-height: 1.25rem;\n --slider-tooltip-font-weight: 600;\n --slider-tooltip-min-width: 24px;\n --slider-tooltip-bg: theme(colors.primary.DEFAULT);\n --slider-tooltip-bg-disabled: theme(colors.primary.DEFAULT/90%);\n --slider-tooltip-color: theme(colors.primary.foreground);\n --slider-tooltip-radius: theme(borderRadius.sm);\n --slider-tooltip-py: 2px;\n --slider-tooltip-px: 6px;\n --slider-tooltip-arrow-size: 5px;\n --slider-tooltip-distance: 4px;\n }\n</style>\n',
|
|
3060
3108
|
},
|
|
3061
3109
|
],
|
|
3062
3110
|
utils: [],
|