@indielayer/ui 1.5.1 → 1.6.0

package/src/components/qrCode/theme/QrCode.base.theme.ts

@@ -0,0 +1,9 @@
+import type { QrCodeTheme } from '../QrCode.vue'
+
+const theme: QrCodeTheme = {
+  classes: {
+    wrapper: 'rounded-md',
+  },
+}
+
+export default theme

package/src/components/qrCode/theme/QrCode.carbon.theme.ts

@@ -0,0 +1,7 @@
+import type { QrCodeTheme } from '../QrCode.vue'
+
+import BaseTheme from './QrCode.base.theme'
+
+const theme: QrCodeTheme = BaseTheme
+
+export default theme

package/src/components/radio/theme/Radio.base.theme.ts

@@ -5,7 +5,7 @@ const theme: RadioTheme = {
     wrapper: ({ data }) => {
       const classes = ['inline-block relative cursor-pointer focus:outline-none group']
 
-      if (data.isInsideForm && !data.isInsideFormGroup) classes.push('mb-3')
+      if (data.isInsideForm && !data.isInsideFormGroup) classes.push('mb-5')
 
       return classes
     },
@@ -33,8 +33,10 @@ const theme: RadioTheme = {
       return c
     },
 
-    label: ({ props }) => {
-      let c = 'font-medium text-secondary-800 dark:text-secondary-200 pl-2'
+    label: ({ props, data }) => {
+      let c = 'text-secondary-800 dark:text-secondary-200 pl-2'
+
+      c += data.isInsideFormGroup ? ' font-normal' : ' font-medium'
 
       if (props.size === 'xs') c += ' text-xs'
       else if (props.size === 'sm') c += ' text-sm'

package/src/components/scroll/Scroll.vue

@@ -50,7 +50,7 @@ defineExpose({ scrollEl: scrollEl as Ref<HTMLElement | null> })
 
 <template>
   <div
-    class="flex relative overflow-hidden"
+    class="flex relative overflow-hidden max-w-full max-h-full"
     :style="styles"
     :class="[
       className,

package/src/components/slider/Slider.vue

@@ -1,21 +1,25 @@
 <script lang="ts">
 const sliderProps = {
-  ...useCommon.props(),
   ...useColors.props('primary'),
   ...useInteractive.props(),
   ...useInputtable.props(),
-  min: Number,
-  max: Number,
+  min: {
+    type: [Number, String],
+    default: 0,
+  },
+  max: {
+    type: [Number, String],
+    default: 100,
+  },
   step: {
-    type: Number,
+    type: [Number, String],
     default: 1,
   },
-  gradient: Boolean,
 }
 
 export type SliderProps = ExtractPublicPropTypes<typeof sliderProps>
 
-type InternalClasses = 'wrapper' | 'drag'
+type InternalClasses = 'wrapper' | 'input' | 'track' | 'progress'
 export interface SliderTheme extends ThemeComponent<SliderProps, InternalClasses> {}
 
 export default {
@@ -27,8 +31,7 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { computed, ref, watch, type ExtractPublicPropTypes } from 'vue'
-import { useEventListener } from '@vueuse/core'
+import { ref, watch, type ExtractPublicPropTypes, computed } from 'vue'
 import { useCommon } from '../../composables/useCommon'
 import { useColors } from '../../composables/useColors'
 import { useInteractive } from '../../composables/useInteractive'
@@ -36,15 +39,13 @@ import { useInputtable } from '../../composables/useInputtable'
 import { useTheme, type ThemeComponent } from '../../composables/useTheme'
 
 import XLabel from '../label/Label.vue'
-import XProgress from '../progress/Progress.vue'
+import XInputFooter from '../inputFooter/InputFooter.vue'
 
 const props = defineProps(sliderProps)
 
-const emit = defineEmits(useInputtable.emits(false))
+const emit = defineEmits(useInputtable.emits())
 
 const elRef = ref<HTMLElement | null>(null)
-const dragRef = ref<HTMLElement | null>(null)
-const progressRef = ref<HTMLElement | null>(null)
 const value = ref<number>(Number(props.modelValue ?? 0))
 
 const { focus, blur } = useInteractive(elRef)
@@ -57,110 +58,19 @@ watch(value, (val) => {
   emit('update:modelValue', val)
 })
 
-const initial = ref()
-const isDragging = computed(() => !!initial.value)
-
-function startProgressDrag(e: PointerEvent) {
-  e.stopPropagation()
-  if (!dragRef.value || !progressRef.value) return
-
-  focus()
-
-  const maxWidth = progressRef.value.offsetWidth
-  let percent = Math.floor(e.offsetX * 100 / maxWidth)
-
-  if (percent < 0) percent = 0
-  if (percent > 100) percent = 100
-
-  value.value = percent
-
-  setTimeout(() => {
-    initial.value = {
-      x: e.x,
-      y: e.y,
-      maxWidth,
-      offsetX: dragRef.value?.offsetLeft,
-    }
-  })
-  e.preventDefault()
-  e.stopPropagation()
-}
-
-function startDrag(e: PointerEvent) {
-  if (!dragRef.value || !progressRef.value) return
-
-  focus()
-
-  initial.value = {
-    x: e.x,
-    y: e.y,
-    maxWidth: progressRef.value.offsetWidth,
-    offsetX: dragRef.value.offsetLeft,
-  }
-
-  e.preventDefault()
-  e.stopPropagation()
-}
-
-function moveDrag(e: PointerEvent) {
-  if (!initial.value || !dragRef.value) return
-
-  const { x, maxWidth, offsetX } = initial.value
-  const movedX = e.x - x
-
-  if (movedX === 0) return
-
-  const newMoveX = offsetX + movedX
-  let percent = Math.floor(newMoveX * 100 / maxWidth)
-
-  if (percent < 0) percent = 0
-  if (percent > 100) percent = 100
-
-  value.value = percent
-
-  e.preventDefault()
-  e.stopPropagation()
-}
-
-function endDrag(e: PointerEvent) {
-  if (!initial.value) return
-  initial.value = undefined
-  e.preventDefault()
-  e.stopPropagation()
-}
-
-if (typeof window !== 'undefined') {
-  useEventListener(progressRef, 'pointerdown', startProgressDrag, false)
-  useEventListener(dragRef, 'pointerdown', startDrag, false)
-  useEventListener(window, 'pointermove', moveDrag, true)
-  useEventListener(window, 'pointerup', endDrag, true)
-}
-
-useEventListener(elRef, 'keydown', handleKeydown)
-
-function handleKeydown(e: KeyboardEvent) {
-  if (e.code === 'ArrowLeft') {
-    const nextValue = value.value - 1
-
-    if (nextValue >= 0) value.value = nextValue
-
-    e.preventDefault()
-  } else if (e.code === 'ArrowRight') {
-    const nextValue = value.value + 1
-
-    if (nextValue <= 100) value.value = nextValue
-
-    e.preventDefault()
-  }
-}
+const progress = computed(() => {
+  return ((value.value - Number(props.min)) / (Number(props.max) - Number(props.min))) * 100
+})
 
 const {
   errorInternal,
+  hideFooterInternal,
+  isInsideForm,
+  inputListeners,
   reset,
   validate,
   setError,
-  isInsideForm,
-} = useInputtable(props, { focus, emit, withListeners: false })
+} = useInputtable(props, { focus, emit })
 
 const { styles, classes, className } = useTheme('Slider', {}, props)
 
@@ -169,9 +79,6 @@ defineExpose({ focus, blur, reset, validate, setError })
 
 <template>
   <x-label
-    ref="elRef"
-    tabindex="0"
-    class="group"
     :style="styles"
     :disabled="disabled"
     :required="required"
@@ -181,36 +88,55 @@ defineExpose({ focus, blur, reset, validate, setError })
       className,
       classes.wrapper,
     ]"
+    :tooltip="tooltip"
   >
-    <div class="flex items-center relative w-full">
+    <div class="flex items-center relative w-full gap-2 min-h-[1.25rem]">
       <slot name="prefix" :value="value"></slot>
-      <div
-        ref="progressRef"
-        :class="[isDragging ? 'cursor-grabbing' : 'cursor-grab']"
-        class="relative w-full py-2 mx-2"
-      >
-        <div class="-mx-2">
-          <x-progress
-            :percentage="value"
-            :animate="false"
-            thick
-            class="w-full"
-            :gradient="gradient"
-          />
+      <div class="relative flex items-center flex-1">
+        <input
+          :id="id"
+          ref="elRef"
+          type="range"
+          :class="[classes.input, 'absolute w-full z-10 appearance-none bg-transparent focus:outline-none focus-visible:outline-none']"
+          :disabled="disabled"
+          :name="name"
+          :max="max"
+          :min="min"
+          :step="step"
+          :readonly="readonly"
+          :value="value"
+          v-on="inputListeners"
+        />
+        <div :class="['absolute w-full', classes.track]">
+          <div
+            :class="classes.progress"
+            :style="{ width: progress + '%' }"
+          ></div>
         </div>
-        <div
-          ref="dragRef"
-          class="absolute group-focus:border-[color:var(--x-slider-border)]"
-          :class="[
-            classes.drag,
-            isDragging ? 'cursor-grabbing' : 'cursor-grab'
-          ]"
-          :style="`left: ${value}%;`"
-        ></div>
       </div>
       <slot name="suffix" :value="value"></slot>
     </div>
 
-    <p v-if="errorInternal" class="text-sm text-error-500 mt-1" v-text="errorInternal"></p>
+    <x-input-footer v-if="!hideFooterInternal" :error="errorInternal" :helper="helper"/>
   </x-label>
 </template>
+
+<style lang="postcss" scoped>
+[type="range"]::-webkit-slider-thumb {
+  @apply cursor-pointer h-5 w-5 border-solid border rounded-full
+    bg-white appearance-none border-[color:var(--x-slider-bg)];
+}
+
+[type="range"]:focus::-webkit-slider-thumb {
+  @apply ring ring-offset-1;
+}
+
+[type="range"]::-moz-range-thumb {
+  @apply cursor-pointer h-5 w-5 border-solid border rounded-full
+    bg-white border-[color:var(--x-slider-bg)];
+}
+
+[type="range"]:focus::-moz-range-thumb {
+  @apply ring ring-offset-1;
+}
+</style>

package/src/components/slider/theme/Slider.base.theme.ts

@@ -2,18 +2,23 @@ import type { SliderTheme } from '../Slider.vue'
 
 const theme: SliderTheme = {
   classes: {
-    wrapper: '',
+    wrapper: ({ props }) => {
+      const classes = []
 
-    drag: 'w-[20px] h-[20px] -mt-[13px] -ml-[10px] rounded-full bg-white border shadow-sm',
+      if (props.disabled) classes.push('cursor-not-allowed')
+
+      return classes
+    },
+    input: 'w-[calc(100%+0.5rem)] -ml-1 disabled:cursor-not-allowed',
+    track: 'h-1.5 bg-secondary-200 dark:bg-secondary-700 rounded-md overflow-hidden',
+    progress: 'h-full bg-[color:var(--x-slider-bg)]',
   },
 
   styles: ({ props, colors, css }) => {
-    const primary = colors.getPalette('primary')
     const color = colors.getPalette(props.color)
 
     return css.variables({
-      bg: color[500],
-      border: primary[500],
+      bg: color[400],
     })
   },
 }

package/src/components/slider/theme/Slider.carbon.theme.ts

@@ -1,21 +1,7 @@
 import type { SliderTheme } from '../Slider.vue'
 
-const theme: SliderTheme = {
-  classes: {
-    wrapper: '',
+import BaseTheme from './Slider.base.theme'
 
-    drag: 'w-[16px] h-[16px] -mt-[11px] -ml-[8px] rounded-full bg-secondary-900 dark:bg-secondary-100',
-  },
-
-  styles: ({ props, colors, css }) => {
-    const primary = colors.getPalette('primary')
-    const color = colors.getPalette(props.color)
-
-    return css.variables({
-      bg: color[500],
-      border: primary[500],
-    })
-  },
-}
+const theme: SliderTheme = BaseTheme
 
 export default theme

package/src/components/stepper/Stepper.vue

@@ -114,6 +114,7 @@ const { styles, classes, className } = useTheme('Stepper', {}, props)
             :is="interactive ? 'button' : 'div'"
             v-for="(step, index) in steps"
             :key="index"
+            :type="interactive ? 'button' : undefined"
             :class="[classes.step, {
               'cursor-pointer': interactive && !step.disabled,
               'text-secondary-400 dark:text-secondary-600': step.disabled,

package/src/components/tab/Tab.vue

@@ -121,6 +121,7 @@ const { styles, classes, className } = useTheme('Tab', {}, ref({
   <component
     :is="to ? XLink : tag"
     ref="elRef"
+    :type="tag === 'button' ? 'button' : undefined"
     :data-value="computedValue"
     :to="to"
     :color="selected ? color : undefined"

package/src/components/table/Table.vue

@@ -227,7 +227,7 @@ const { styles, classes, className } = useTheme('Table', {}, props)
             @click="$emit('click-row', item)"
           >
             <x-table-cell v-if="expandable" width="48" class="!p-1">
-              <button class="p-4" @click="internalItems[index].__expanded = !internalItems[index].__expanded">
+              <button type="button" class="p-4" @click="internalItems[index].__expanded = !internalItems[index].__expanded">
                 <x-icon
                   :icon="chevronDownIcon"
                   :size="dense ? 'xs' : 'md'"

package/src/create.ts

@@ -1,16 +1,23 @@
-import type { App } from 'vue'
+import type { App, InjectionKey, MaybeRef } from 'vue'
 import { injectIconsKey, injectOptionsKey, injectThemeKey } from './composables/keys'
 import { injectThemeStyles, type UITheme } from './theme'
+import type { IconInjection } from './components/icon/Icon.vue'
 
 export type UIOptions = {
   prefix?: string;
   components?: any[];
   icons?: Record<string, any>;
   theme?: UITheme;
+  injectIconsKey?: InjectionKey<IconInjection>;
+  injectOptionsKey?: InjectionKey<UIOptions>;
+  injectThemeKey?: InjectionKey<MaybeRef<UITheme>>;
 }
 
 const defaultOptions: UIOptions = {
   prefix: 'X',
+  injectIconsKey,
+  injectOptionsKey,
+  injectThemeKey,
 }
 
 const create = (createOptions: UIOptions = {}) => {
@@ -28,9 +35,9 @@ const create = (createOptions: UIOptions = {}) => {
         if (!app.component(`${options.prefix}${name}`)) app.component(`${options.prefix}${name}`, component)
       })
 
-    app.provide(injectOptionsKey, options)
-    app.provide(injectIconsKey, options.icons || {})
-    app.provide(injectThemeKey, options.theme || {})
+    app.provide(installOptions.injectOptionsKey || injectOptionsKey, options)
+    app.provide(installOptions.injectIconsKey || injectIconsKey, options.icons || {})
+    app.provide(installOptions.injectThemeKey || injectThemeKey, options.theme || {})
 
     if (options.theme?.styles) injectThemeStyles(options.theme.name || '', options.theme.styles)
   }

package/src/theme.ts

@@ -13,6 +13,7 @@ import type {
   CarouselSlideTheme,
   CheckboxTheme,
   ContainerTheme,
+  DatepickerTheme,
   DividerTheme,
   DrawerTheme,
   FormTheme,
@@ -33,6 +34,7 @@ import type {
   PopoverTheme,
   PopoverContainerTheme,
   ProgressTheme,
+  QrCodeTheme,
   RadioTheme,
   ScrollTheme,
   SelectTheme,
@@ -65,6 +67,7 @@ export type ComponentThemes = {
   CarouselSlide: CarouselSlideTheme;
   Checkbox: CheckboxTheme;
   Container: ContainerTheme;
+  Datepicker: DatepickerTheme;
   Divider: DividerTheme;
   Drawer: DrawerTheme;
   Form: FormTheme;
@@ -85,6 +88,7 @@ export type ComponentThemes = {
   Popover: PopoverTheme;
   PopoverContainer: PopoverContainerTheme;
   Progress: ProgressTheme;
+  QrCode: QrCodeTheme;
   Radio: RadioTheme;
   Scroll: ScrollTheme;
   Select: SelectTheme;

package/src/themes/base/components.ts

@@ -11,6 +11,7 @@ export { default as Carousel } from '../../components/carousel/theme/Carousel.ba
 export { default as CarouselSlide } from '../../components/carousel/theme/CarouselSlide.base.theme'
 export { default as Checkbox } from '../../components/checkbox/theme/Checkbox.base.theme'
 export { default as Container } from '../../components/container/theme/Container.base.theme'
+export { default as Datepicker } from '../../components/datepicker/theme/Datepicker.base.theme'
 export { default as Divider } from '../../components/divider/theme/Divider.base.theme'
 export { default as Drawer } from '../../components/drawer/theme/Drawer.base.theme'
 export { default as Form } from '../../components/form/theme/Form.base.theme'
@@ -31,6 +32,7 @@ export { default as PaginationItem } from '../../components/pagination/theme/Pag
 export { default as Popover } from '../../components/popover/theme/Popover.base.theme'
 export { default as PopoverContainer } from '../../components/popover/theme/PopoverContainer.base.theme'
 export { default as Progress } from '../../components/progress/theme/Progress.base.theme'
+export { default as QrCode } from '../../components/qrCode/theme/QrCode.base.theme'
 export { default as Radio } from '../../components/radio/theme/Radio.base.theme'
 export { default as Scroll } from '../../components/scroll/theme/Scroll.base.theme'
 export { default as Select } from '../../components/select/theme/Select.base.theme'

package/src/themes/base/index.ts

@@ -1,10 +1,10 @@
 import type { UITheme } from '../../theme'
 import * as components from './components'
-import rawStyles from './styles.css?raw'
+import styles from './styles'
 
 const theme: UITheme = {
   name: 'Base',
-  styles: `${rawStyles}`,
+  styles,
   classPrefix: 'x-',
   components,
 }

package/{lib/themes/base/styles.css.js → src/themes/base/styles.ts}

@@ -1,4 +1,4 @@
-const o = `/* stylelint-disable value-keyword-case */
+export default `
 html {
   color: #111827;
   background-color: white;
@@ -85,7 +85,4 @@ body {
   --error-color-900: 127, 29, 29;
   --error-color-950: 69, 10, 10;
 }
-`;
-export {
-  o as default
-};
+`

package/src/themes/carbon/components.ts

@@ -11,6 +11,7 @@ export { default as Carousel } from '../../components/carousel/theme/Carousel.ca
 export { default as CarouselSlide } from '../../components/carousel/theme/CarouselSlide.carbon.theme'
 export { default as Checkbox } from '../../components/checkbox/theme/Checkbox.carbon.theme'
 export { default as Container } from '../../components/container/theme/Container.carbon.theme'
+export { default as Datepicker } from '../../components/datepicker/theme/Datepicker.carbon.theme'
 export { default as Divider } from '../../components/divider/theme/Divider.carbon.theme'
 export { default as Drawer } from '../../components/drawer/theme/Drawer.carbon.theme'
 export { default as Form } from '../../components/form/theme/Form.carbon.theme'
@@ -31,6 +32,7 @@ export { default as PaginationItem } from '../../components/pagination/theme/Pag
 export { default as Popover } from '../../components/popover/theme/Popover.carbon.theme'
 export { default as PopoverContainer } from '../../components/popover/theme/PopoverContainer.carbon.theme'
 export { default as Progress } from '../../components/progress/theme/Progress.carbon.theme'
+export { default as QrCode } from '../../components/qrCode/theme/QrCode.carbon.theme'
 export { default as Radio } from '../../components/radio/theme/Radio.carbon.theme'
 export { default as Scroll } from '../../components/scroll/theme/Scroll.carbon.theme'
 export { default as Select } from '../../components/select/theme/Select.carbon.theme'

package/src/themes/carbon/index.ts

@@ -1,13 +1,13 @@
 import type { UITheme } from '../../theme'
 import * as components from './components'
-import rawStyles from './styles.css?raw'
+import styles from './styles'
 
 const theme: UITheme = {
   name: 'Carbon',
   colors: {
     primary: { '50': '#eff6ff', '100': '#dbeafe', '200': '#bfdbfe', '300': '#93c5fd', '400': '#60a5fa', '500': '#3b82f6', '600': '#2563eb', '700': '#1d4ed8', '800': '#1e40af', '900': '#1e3a8a', '950': '#172554' },
   },
-  styles: `${rawStyles}`,
+  styles,
   classPrefix: 'x-',
   components,
 }

package/src/themes/carbon/{styles.css → styles.ts}

@@ -1,3 +1,4 @@
+export default `
 html {
   color: #111827;
   background-color: white;
@@ -80,3 +81,4 @@ html.dark {
   --error-color-900: 127, 29, 29;
   --error-color-950: 69, 10, 10;
 }
+`

package/src/version.ts

@@ -1 +1 @@
-export default '1.5.1'
+export default '1.6.0'

package/volar.d.ts

@@ -13,6 +13,7 @@ declare module 'vue' {
     XCarouselSlide: typeof import('@indielayer/ui')['XCarouselSlide']
     XCheckbox: typeof import('@indielayer/ui')['XCheckbox']
     XContainer: typeof import('@indielayer/ui')['XContainer']
+    XDatepicker: typeof import('@indielayer/ui')['XDatepicker']
     XDivider: typeof import('@indielayer/ui')['XDivider']
     XDrawer: typeof import('@indielayer/ui')['XDrawer']
     XForm: typeof import('@indielayer/ui')['XForm']
@@ -33,6 +34,7 @@ declare module 'vue' {
     XPopover: typeof import('@indielayer/ui')['XPopover']
     XPopoverContainer: typeof import('@indielayer/ui')['XPopoverContainer']
     XProgress: typeof import('@indielayer/ui')['XProgress']
+    XQrCode: typeof import('@indielayer/ui')['XQrCode']
     XRadio: typeof import('@indielayer/ui')['XRadio']
     XScroll: typeof import('@indielayer/ui')['XScroll']
     XSelect: typeof import('@indielayer/ui')['XSelect']