ui-thing 0.1.34 → 0.1.36

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ui-thing",
-  "version": "0.1.34",
+  "version": "0.1.36",
   "description": "CLI used to add Nuxt 3 components to a project",
   "keywords": [
     "cli",
@@ -38,7 +38,7 @@
     "test": "vitest"
   },
   "dependencies": {
-    "axios": "^1.7.7",
+    "axios": "^1.7.8",
     "boxen": "^8.0.1",
     "build": "^0.1.4",
     "c12": "^2.0.1",
@@ -49,7 +49,7 @@
     "fs-extra": "^11.2.0",
     "kleur": "^4.1.5",
     "lodash": "^4.17.21",
-    "nypm": "^0.3.12",
+    "nypm": "^0.4.1",
     "ora": "^8.1.1",
     "prompts": "^2.4.2"
   },
@@ -59,13 +59,13 @@
     "@types/figlet": "^1.7.0",
     "@types/fs-extra": "^11.0.4",
     "@types/lodash": "^4.17.13",
-    "@types/node": "^22.9.1",
+    "@types/node": "^22.10.1",
     "@types/prompts": "^2.4.9",
-    "@vitest/coverage-v8": "^2.1.5",
+    "@vitest/coverage-v8": "^2.1.6",
     "magicast": "^0.3.5",
     "tsup": "^8.3.5",
-    "typescript": "^5.6.3",
-    "vitest": "^2.1.5"
+    "typescript": "^5.7.2",
+    "vitest": "^2.1.6"
   },
   "publishConfig": {
     "access": "public"

package/src/comps.ts

@@ -2196,7 +2196,7 @@ export default [
         fileName: "Sidebar/Provider.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <UiTooltipProvider :delay-duration="0">\n    <div\n      :style="{\n        \'--sidebar-width\': SIDEBAR_WIDTH,\n        \'--sidebar-width-icon\': SIDEBAR_WIDTH_ICON,\n      }"\n      :class="sideBarProviderStyles({ class: props.class })"\n    >\n      <slot />\n    </div>\n  </UiTooltipProvider>\n</template>\n\n<script lang="ts">\n  import type { HTMLAttributes, Ref } from "vue";\n\n  export const sideBarProviderStyles = tv({\n    base: "group/sidebar-wrapper flex min-h-svh w-full text-sidebar-foreground has-[[data-variant=inset]]:bg-sidebar",\n  });\n</script>\n\n<script setup lang="ts">\n  const props = withDefaults(\n    defineProps<{\n      /**\n       * Default open state of the sidebar.\n       * @default true\n       */\n      defaultOpen?: boolean;\n      /**\n       * Open state of the sidebar (controlled).\n       * @default undefined\n       */\n      open?: boolean;\n      /**\n       * Additional classes to apply to the parent element.\n       */\n      class?: HTMLAttributes["class"];\n    }>(),\n    {\n      defaultOpen: true,\n      open: undefined,\n    }\n  );\n\n  // This sets the cookie to keep the sidebar state.\n  const SIDEBAR_COOKIE = useCookie<boolean>(SIDEBAR_COOKIE_NAME, {\n    path: "/",\n    maxAge: SIDEBAR_COOKIE_MAX_AGE,\n    default: () => false,\n  });\n\n  const emits = defineEmits<{\n    "update:open": [open: boolean];\n  }>();\n\n  const isMobile = useMediaQuery("(max-width: 768px)");\n  const openMobile = ref(false);\n\n  const open = useVModel(props, "open", emits, {\n    defaultValue: props.defaultOpen ? props.defaultOpen : SIDEBAR_COOKIE.value,\n    passive: (props.open === undefined) as false,\n  }) as Ref<boolean>;\n\n  function setOpen(value: boolean) {\n    open.value = value; // emits(\'update:open\', value)\n    SIDEBAR_COOKIE.value = value;\n  }\n\n  function setOpenMobile(value: boolean) {\n    openMobile.value = value;\n  }\n\n  // Helper to toggle the sidebar.\n  function toggleSidebar() {\n    return isMobile.value ? setOpenMobile(!openMobile.value) : setOpen(!open.value);\n  }\n\n  useEventListener("keydown", (event: KeyboardEvent) => {\n    if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {\n      event.preventDefault();\n      toggleSidebar();\n    }\n  });\n\n  // We add a state so that we can do data-state="expanded" or "collapsed".\n  // This makes it easier to style the sidebar with Tailwind classes.\n  const state = computed(() => (open.value ? "expanded" : "collapsed"));\n\n  provideSidebarContext({\n    state,\n    open,\n    setOpen,\n    isMobile,\n    openMobile,\n    setOpenMobile,\n    toggleSidebar,\n  });\n</script>\n',
+          '<template>\n  <UiTooltipProvider :delay-duration="0">\n    <div\n      :style="{\n        \'--sidebar-width\': SIDEBAR_WIDTH,\n        \'--sidebar-width-icon\': SIDEBAR_WIDTH_ICON,\n      }"\n      :class="sideBarProviderStyles({ class: props.class })"\n    >\n      <slot v-bind="{ state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar }" />\n    </div>\n  </UiTooltipProvider>\n</template>\n\n<script lang="ts">\n  import type { HTMLAttributes, Ref } from "vue";\n\n  export const sideBarProviderStyles = tv({\n    base: "group/sidebar-wrapper flex min-h-svh w-full text-sidebar-foreground has-[[data-variant=inset]]:bg-sidebar",\n  });\n</script>\n\n<script setup lang="ts">\n  const props = withDefaults(\n    defineProps<{\n      /**\n       * Default open state of the sidebar.\n       * @default true\n       */\n      defaultOpen?: boolean;\n      /**\n       * Open state of the sidebar (controlled).\n       * @default undefined\n       */\n      open?: boolean;\n      /**\n       * Additional classes to apply to the parent element.\n       */\n      class?: HTMLAttributes["class"];\n    }>(),\n    {\n      defaultOpen: true,\n      open: undefined,\n    }\n  );\n\n  // This sets the cookie to keep the sidebar state.\n  const SIDEBAR_COOKIE = useCookie<boolean>(SIDEBAR_COOKIE_NAME, {\n    path: "/",\n    maxAge: SIDEBAR_COOKIE_MAX_AGE,\n    default: () => false,\n  });\n\n  const emits = defineEmits<{\n    "update:open": [open: boolean];\n  }>();\n\n  const isMobile = useMediaQuery("(max-width: 768px)");\n  const openMobile = ref(false);\n\n  const open = useVModel(props, "open", emits, {\n    defaultValue: props.defaultOpen ? props.defaultOpen : SIDEBAR_COOKIE.value,\n    passive: (props.open === undefined) as false,\n  }) as Ref<boolean>;\n\n  function setOpen(value: boolean) {\n    open.value = value; // emits(\'update:open\', value)\n    SIDEBAR_COOKIE.value = value;\n  }\n\n  function setOpenMobile(value: boolean) {\n    openMobile.value = value;\n  }\n\n  // Helper to toggle the sidebar.\n  function toggleSidebar() {\n    return isMobile.value ? setOpenMobile(!openMobile.value) : setOpen(!open.value);\n  }\n\n  useEventListener("keydown", (event: KeyboardEvent) => {\n    if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {\n      event.preventDefault();\n      toggleSidebar();\n    }\n  });\n\n  // We add a state so that we can do data-state="expanded" or "collapsed".\n  // This makes it easier to style the sidebar with Tailwind classes.\n  const state = computed(() => (open.value ? "expanded" : "collapsed"));\n\n  provideSidebarContext({\n    state,\n    open,\n    setOpen,\n    isMobile,\n    openMobile,\n    setOpenMobile,\n    toggleSidebar,\n  });\n</script>\n',
       },
       {
         fileName: "Sidebar/Rail.vue",
@@ -2736,7 +2736,7 @@ export default [
     plugins: [],
   },
   {
-    name: "VeeCheckbox",
+    name: "Vee Checkbox",
     value: "vee-checkbox",
     deps: ["@vee-validate/nuxt", "@morev/vue-transitions"],
     askValidator: true,
@@ -2755,7 +2755,7 @@ export default [
     plugins: [],
   },
   {
-    name: "VeeCurrencyInput",
+    name: "Vee CurrencyInput",
     value: "vee-currency-input",
     deps: ["@vee-validate/nuxt", "@morev/vue-transitions"],
     askValidator: true,
@@ -2774,7 +2774,7 @@ export default [
     plugins: [],
   },
   {
-    name: "VeeDateField",
+    name: "Vee DateField",
     value: "vee-date-field",
     deps: ["@vee-validate/nuxt", "@morev/vue-transitions", "@internationalized/date"],
     askValidator: true,
@@ -2793,7 +2793,7 @@ export default [
     plugins: [],
   },
   {
-    name: "VeeDatepicker",
+    name: "Vee Datepicker",
     value: "vee-datepicker",
     deps: ["@vee-validate/nuxt", "@morev/vue-transitions"],
     askValidator: true,
@@ -2812,7 +2812,7 @@ export default [
     plugins: [],
   },
   {
-    name: "VeeFileInput",
+    name: "Vee FileInput",
     value: "vee-file-input",
     deps: ["@vee-validate/nuxt", "@morev/vue-transitions"],
     askValidator: true,
@@ -2831,7 +2831,7 @@ export default [
     plugins: [],
   },
   {
-    name: "VeeInput",
+    name: "Vee Input",
     value: "vee-input",
     deps: ["@vee-validate/nuxt", "@morev/vue-transitions"],
     askValidator: true,
@@ -2850,7 +2850,7 @@ export default [
     plugins: [],
   },
   {
-    name: "VeeMultiSelect",
+    name: "Vee MultiSelect",
     value: "vee-multi-select",
     deps: ["@vee-validate/nuxt", "@morev/vue-transitions", "@vueform/multiselect"],
     askValidator: true,
@@ -2869,7 +2869,7 @@ export default [
     plugins: [],
   },
   {
-    name: "VeeNumberField",
+    name: "Vee NumberField",
     value: "vee-number-field",
     deps: ["@vee-validate/nuxt", "@morev/vue-transitions", "@internationalized/number"],
     askValidator: true,
@@ -2888,7 +2888,7 @@ export default [
     plugins: [],
   },
   {
-    name: "Vee Pin Input",
+    name: "Vee Pin-Input",
     value: "vee-pin-input",
     deps: ["@vee-validate/nuxt", "@morev/vue-transitions"],
     askValidator: true,
@@ -2907,7 +2907,7 @@ export default [
     plugins: [],
   },
   {
-    name: "VeeRadioGroup",
+    name: "Vee RadioGroup",
     value: "vee-radio-group",
     deps: ["@vee-validate/nuxt", "@morev/vue-transitions"],
     askValidator: true,
@@ -2926,7 +2926,7 @@ export default [
     plugins: [],
   },
   {
-    name: "VeeSelect",
+    name: "Vee Select",
     value: "vee-select",
     deps: ["@vee-validate/nuxt", "@morev/vue-transitions"],
     askValidator: true,
@@ -2945,7 +2945,7 @@ export default [
     plugins: [],
   },
   {
-    name: "VeeTagsInput",
+    name: "Vee Tags-Input",
     value: "vee-tags-input",
     deps: ["@vee-validate/nuxt", "@morev/vue-transitions"],
     askValidator: true,
@@ -2964,7 +2964,7 @@ export default [
     plugins: [],
   },
   {
-    name: "VeeTextarea",
+    name: "Vee Textarea",
     value: "vee-textarea",
     deps: ["@vee-validate/nuxt", "@morev/vue-transitions"],
     askValidator: true,
@@ -2982,6 +2982,25 @@ export default [
     composables: [],
     plugins: [],
   },
+  {
+    name: "Vee VueFormSlider",
+    value: "vee-vue-form-slider",
+    deps: ["@vee-validate/nuxt", "@morev/vue-transitions", "@vueform/slider"],
+    askValidator: true,
+    nuxtModules: ["@vee-validate/nuxt", "@morev/vue-transitions/nuxt"],
+    components: [],
+    files: [
+      {
+        fileName: "Vee/VueFormSlider.vue",
+        dirPath: "components/UI",
+        fileContent:
+          '<template>\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</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\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</script>\n<script lang="ts" setup>\n  defineOptions({ inheritAttrs: false });\n  const props = defineProps<SliderProps>();\n\n  const emits = defineEmits<SliderEmits>();\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',
+      },
+    ],
+    utils: [],
+    composables: [],
+    plugins: [],
+  },
   {
     name: "Vue Sonner",
     value: "vue-sonner",