@poveste/controls 0.6.1 → 0.8.0

package/package.json

@@ -1,17 +1,24 @@
 {
   "name": "@poveste/controls",
   "type": "module",
-  "version": "0.6.1",
+  "version": "0.8.0",
   "description": "Prebuilt controls components",
   "author": {
     "name": "Sorin Gitlan"
   },
   "license": "MIT",
+  "homepage": "https://poveste.dev",
   "repository": {
     "url": "https://github.com/poveste-dev/poveste.git",
     "type": "git",
     "directory": "packages/poveste-controls"
   },
+  "bugs": "https://github.com/poveste-dev/poveste/issues",
+  "keywords": [
+    "poveste",
+    "controls",
+    "props"
+  ],
   "publishConfig": {
     "access": "public"
   },
@@ -30,6 +37,12 @@
   "main": "./dist/index.es.js",
   "module": "./dist/index.es.js",
   "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "engines": {
+    "node": "^22.22.2 || ^24.15.0 || >=26.0.0"
+  },
   "dependencies": {
     "@codemirror/commands": "^6.7.1",
     "@codemirror/lang-json": "^6.0.1",
@@ -38,8 +51,8 @@
     "@codemirror/state": "^6.4.1",
     "@codemirror/theme-one-dark": "^6.1.2",
     "@codemirror/view": "^6.35.0",
-    "@poveste/shared": "^0.6.1",
-    "@poveste/vendors": "^0.6.1"
+    "@poveste/shared": "^0.8.0",
+    "@poveste/vendors": "^0.8.0"
   },
   "devDependencies": {
     "@tailwindcss/cli": "^4.3.3",

package/postcss.config.cjs

@@ -1,7 +0,0 @@
-module.exports = {
-  plugins: [
-    // Processes Tailwind in both the CSS entry and Vue SFC <style> blocks
-    // (@apply/@reference). @tailwindcss/vite misses SFC styles in lib builds.
-    require('@tailwindcss/postcss'),
-  ],
-}

package/src/components/HstCopyIcon.story.vue

@@ -1,26 +0,0 @@
-<script lang="ts" setup>
-import HstCopyIcon from './HstCopyIcon.vue'
-
-function initState() {
-  return {
-    content: 'Text fo copy',
-  }
-}
-</script>
-
-<template>
-  <Story
-    title="internals/HstCopyIcon"
-  >
-    <Variant
-      title="default"
-      :init-state="initState"
-    >
-      <template #default="{ state }">
-        <HstCopyIcon
-          :content="state.content"
-        />
-      </template>
-    </Variant>
-  </Story>
-</template>

package/src/components/HstCopyIcon.vue

@@ -1,38 +0,0 @@
-<script lang="ts">
-export default {
-  name: 'HstCopyIcon',
-}
-</script>
-
-<script lang="ts" setup>
-import type { Awaitable } from '@poveste/shared'
-import { Icon } from '@iconify/vue'
-import { useClipboard } from '@vueuse/core'
-import { VTooltip as vTooltip } from 'floating-vue'
-
-const props = defineProps<{
-  content: string | (() => Awaitable<string>)
-}>()
-
-const { copy, copied } = useClipboard()
-
-async function action() {
-  const content = typeof props.content === 'function' ? await props.content() : props.content
-  copy(content)
-}
-</script>
-
-<template>
-  <Icon
-    v-tooltip="{
-      content: 'Copied!',
-      triggers: [],
-      shown: copied,
-      distance: 12,
-      delay: 0,
-    }"
-    icon="carbon:copy-file"
-    class="w-4 h-4 opacity-50 hover:opacity-100 hover:text-primary-500 cursor-pointer"
-    @click="action()"
-  />
-</template>

package/src/components/HstWrapper.vue

@@ -1,41 +0,0 @@
-<script lang="ts">
-export default {
-  name: 'HstWrapper',
-}
-</script>
-
-<script lang="ts" setup>
-import { VTooltip as vTooltip } from 'floating-vue'
-
-withDefaults(defineProps<{
-  title?: string
-  tag?: string
-}>(), {
-  title: undefined,
-  tag: 'label',
-})
-</script>
-
-<template>
-  <component
-    :is="tag"
-    class="poveste-wrapper histoire-wrapper p-2 hover:bg-primary-100 dark:hover:bg-primary-800 flex gap-2 flex-wrap"
-  >
-    <span
-      v-tooltip="{
-        content: title,
-        placement: 'left',
-        distance: 12,
-      }"
-      class="w-28 whitespace-nowrap text-ellipsis overflow-hidden shrink-0"
-    >
-      {{ title }}
-    </span>
-    <span class="grow max-w-full flex items-center gap-1">
-      <span class="block grow max-w-full">
-        <slot />
-      </span>
-      <slot name="actions" />
-    </span>
-  </component>
-</template>

package/src/components/button/HstButton.story.vue

@@ -1,30 +0,0 @@
-<script lang="ts" setup>
-import HstButton from './HstButton.vue'
-
-const variants: Array<{ name: string, bind?: unknown }> = [
-  { name: 'Default' },
-  { name: 'Primary', bind: { color: 'primary' } },
-  { name: 'Flat', bind: { color: 'flat' } },
-]
-</script>
-
-<template>
-  <Story
-    title="HstButton"
-    group="controls"
-    :layout="{ type: 'grid', width: '200px', iframe: false }"
-  >
-    <Variant
-      v-for="(variant, key) of variants"
-      :key="key"
-      :title="variant.name"
-    >
-      <HstButton
-        v-bind="variant.bind as {}"
-        class="p-2"
-      >
-        Click me!
-      </HstButton>
-    </Variant>
-  </Story>
-</template>

package/src/components/button/HstButton.vue

@@ -1,26 +0,0 @@
-<script lang="ts">
-export default {
-  name: 'HstButton',
-}
-</script>
-
-<script setup lang="ts">
-defineProps<{
-  color?: keyof typeof colors
-}>()
-
-const colors = {
-  default: 'bg-gray-200 dark:bg-gray-750 text-gray-900 dark:text-gray-100 hover:bg-primary-200 dark:hover:bg-primary-900',
-  primary: 'bg-primary-500 hover:bg-primary-600 text-white dark:text-black',
-  flat: 'bg-transparent hover:bg-gray-500/20 text-gray-900 dark:text-gray-100',
-}
-</script>
-
-<template>
-  <button
-    class="poveste-button cursor-pointer rounded-sm border-none"
-    :class="colors[color ?? 'default']"
-  >
-    <slot />
-  </button>
-</template>

package/src/components/button/HstButtonGroup.story.vue

@@ -1,79 +0,0 @@
-<script lang="ts" setup>
-import { ref } from 'vue'
-import HstButtonGroup from './HstButtonGroup.vue'
-
-const options = {
-  slow: 'Slow',
-  fast: 'Fast',
-  max: 'Max',
-}
-
-const flatOptions = Object.keys(options)
-
-const objectOptions = Object.keys(options).map(key => ({
-  label: options[key],
-  value: key,
-}))
-
-function initState() {
-  return {
-    speed: flatOptions[0],
-  }
-}
-
-const count = ref('0')
-</script>
-
-<template>
-  <Story
-    title="HstButtonGroup"
-    group="controls"
-    :layout="{ type: 'single', iframe: false }"
-  >
-    <Variant
-      title="playground"
-      :init-state="initState"
-    >
-      <template #default="{ state }">
-        <pre>{{ { speed: state.speed } }}</pre>
-        <HstButtonGroup
-          v-model="state.speed"
-          title="Label"
-          :options="objectOptions"
-        />
-      </template>
-
-      <template #controls="{ state }">
-        <HstButtonGroup
-          v-model="state.speed"
-          title="Label"
-          :options="objectOptions"
-        />
-      </template>
-    </Variant>
-
-    <Variant
-      title="Object options"
-      :init-state="initState"
-    >
-      <template #default="{ state }">
-        <pre>{{ { speed: state.speed } }}</pre>
-        <HstButtonGroup
-          v-model="state.speed"
-          title="Label"
-          :options="options"
-        />
-      </template>
-    </Variant>
-
-    <Variant
-      title="Should retain order"
-    >
-      <pre>{{ { count } }}</pre>
-      <HstButtonGroup
-        v-model="count"
-        :options="[{ label: 'Low', value: '-25' }, { label: 'Regular', value: '0' }, { label: 'High', value: '200' }]"
-      />
-    </Variant>
-  </Story>
-</template>

package/src/components/button/HstButtonGroup.vue

@@ -1,71 +0,0 @@
-<script lang="ts">
-export default {
-  name: 'HstButtonGroup',
-}
-</script>
-
-<script setup lang="ts">
-import type { ComputedRef } from 'vue'
-import type { HstControlOption } from '../../types'
-import { computed } from 'vue'
-import HstWrapper from '../HstWrapper.vue'
-import HstButton from './HstButton.vue'
-
-const props = defineProps<{
-  title?: string
-  modelValue?: string
-  options: string[] | number[] | HstControlOption[] | Record<string, string | number>
-}>()
-
-const emit = defineEmits<{
-  (e: 'update:modelValue', value: string): void
-}>()
-
-const formattedOptions: ComputedRef<HstControlOption[]> = computed(() => {
-  if (Array.isArray(props.options)) {
-    return props.options.map((value: string | number | HstControlOption) => {
-      if (typeof value === 'string' || typeof value === 'number') {
-        return { value, label: String(value) }
-      }
-      else {
-        return value
-      }
-    })
-  }
-  else {
-    return Object.keys(props.options).map((value: string) => ({
-      value,
-      label: props.options[value],
-    }))
-  }
-})
-
-function selectOption(value: string) {
-  emit('update:modelValue', value)
-}
-</script>
-
-<template>
-  <HstWrapper
-    tag="div"
-    role="group"
-    :title="title"
-    class="poveste-button-group flex-nowrap items-center"
-  >
-    <div class="flex gap-px border border-solid border-black/25 dark:border-white/25 rounded-sm p-px">
-      <HstButton
-        v-for="{ label, value } of formattedOptions"
-        :key="value"
-        class="px-1 h-[22px] flex-1 rounded-[3px]!"
-        :color="value === modelValue ? 'primary' : 'flat'"
-        :rounded="false"
-        @click="selectOption(value)"
-      >
-        {{ label }}
-      </HstButton>
-    </div>
-    <template #actions>
-      <slot name="actions" />
-    </template>
-  </HstWrapper>
-</template>

package/src/components/checkbox/HstCheckbox.spec.ts

@@ -1,28 +0,0 @@
-import { mount } from '@vue/test-utils'
-import HstCheckbox from './HstCheckbox.vue'
-
-describe('hstCheckbox', () => {
-  it('toggle to checked', async () => {
-    const wrapper = mount(HstCheckbox, {
-      props: {
-        modelValue: false,
-        title: 'Label',
-      },
-    })
-    await wrapper.trigger('click')
-    expect(wrapper.emitted('update:modelValue')[0]).toEqual([true])
-    expect(wrapper.html()).toMatchSnapshot()
-  })
-
-  it('toggle to unchecked', async () => {
-    const wrapper = mount(HstCheckbox, {
-      props: {
-        modelValue: true,
-        title: 'Label',
-      },
-    })
-    await wrapper.trigger('click')
-    expect(wrapper.emitted('update:modelValue')[0]).toEqual([false])
-    expect(wrapper.html()).toMatchSnapshot()
-  })
-})

package/src/components/checkbox/HstCheckbox.story.vue

@@ -1,47 +0,0 @@
-<script lang="ts" setup>
-import HstCheckbox from './HstCheckbox.vue'
-
-function initState() {
-  return {
-    booleanChecked: false,
-    stringChecked: 'false',
-  }
-}
-</script>
-
-<template>
-  <Story
-    title="HstCheckbox"
-    group="controls"
-    :layout="{ type: 'single', iframe: false }"
-  >
-    <Variant
-      title="playground"
-      :init-state="initState"
-    >
-      <template #default="{ state }">
-        <HstCheckbox
-          v-model="state.booleanChecked"
-          title="Boolean"
-        />
-        {{ { value: state.booleanChecked } }}
-        <HstCheckbox
-          v-model="state.stringChecked"
-          title="String"
-        />
-        {{ { value: state.stringChecked } }}
-      </template>
-
-      <template #controls="{ state }">
-        <HstCheckbox
-          v-model="state.booleanChecked"
-          title="Boolean"
-        />
-        <HstCheckbox
-          v-model="state.stringChecked"
-          title="String"
-        />
-      </template>
-    </Variant>
-  </Story>
-</template>

package/src/components/checkbox/HstCheckbox.vue

@@ -1,56 +0,0 @@
-<script lang="ts">
-export default {
-  name: 'HstCheckbox',
-}
-</script>
-
-<script lang="ts" setup>
-import { computed } from 'vue'
-import HstWrapper from '../HstWrapper.vue'
-import HstSimpleCheckbox from './HstSimpleCheckbox.vue'
-
-type Booleanish = boolean | 'true' | 'false'
-
-const props = defineProps<{
-  modelValue?: Booleanish | null
-  title?: string
-}>()
-
-const emit = defineEmits({
-  'update:modelValue': (newValue: Booleanish) => true,
-})
-
-function toggle() {
-  if (typeof props.modelValue === 'string') {
-    emit('update:modelValue', props.modelValue === 'false' ? 'true' : 'false')
-    return
-  }
-
-  emit('update:modelValue', !props.modelValue)
-}
-
-const isTrue = computed(() => {
-  if (typeof props.modelValue === 'string') {
-    return props.modelValue !== 'false'
-  }
-
-  return props.modelValue
-})
-</script>
-
-<template>
-  <HstWrapper
-    role="checkbox"
-    tabindex="0"
-    class="poveste-checkbox cursor-pointer items-center"
-    :title="title"
-    @click="toggle()"
-    @keydown.enter.prevent="toggle()"
-    @keydown.space.prevent="toggle()"
-  >
-    <HstSimpleCheckbox :model-value="isTrue" />
-    <template #actions>
-      <slot name="actions" />
-    </template>
-  </HstWrapper>
-</template>

package/src/components/checkbox/HstCheckboxList.story.vue

@@ -1,49 +0,0 @@
-<script lang="ts" setup>
-import HstCheckboxList from './HstCheckboxList.vue'
-
-const options = {
-  'crash-bandicoot': 'Crash Bandicoot',
-  'the-last-of-us': 'The Last of Us',
-  'ghost-of-tsushima': 'Ghost of Tsushima',
-}
-
-const objectOptions = Object.keys(options).map(key => ({
-  label: options[key],
-  value: key,
-}))
-
-function initState() {
-  return {
-    characters: [],
-  }
-}
-</script>
-
-<template>
-  <Story
-    title="HstCheckboxList"
-    group="controls"
-    :layout="{ type: 'single', iframe: false }"
-  >
-    <Variant
-      title="playground"
-      :init-state="initState"
-    >
-      <template #default="{ state }">
-        <HstCheckboxList
-          v-model="state.characters"
-          title="Label"
-          :options="objectOptions"
-        />
-      </template>
-
-      <template #controls="{ state }">
-        <HstCheckboxList
-          v-model="state.characters"
-          title="Label"
-          :options="objectOptions"
-        />
-      </template>
-    </Variant>
-  </Story>
-</template>

package/src/components/checkbox/HstCheckboxList.vue

@@ -1,82 +0,0 @@
-<script lang="ts">
-export default {
-  name: 'HstCheckboxList',
-}
-</script>
-
-<script lang="ts" setup>
-import type { ComputedRef } from 'vue'
-import type { HstControlOption } from '../../types'
-import { computed } from 'vue'
-import HstWrapper from '../HstWrapper.vue'
-import HstSimpleCheckbox from './HstSimpleCheckbox.vue'
-
-const props = defineProps<{
-  title?: string
-  modelValue: Array<string>
-  options: string[] | HstControlOption[]
-}>()
-
-const emit = defineEmits<{
-  (e: 'update:modelValue', value: Array<string>): void
-}>()
-
-const formattedOptions: ComputedRef<Record<string, string>> = computed(() => {
-  if (Array.isArray(props.options)) {
-    return Object.fromEntries(props.options.map((value: string | HstControlOption) => {
-      if (typeof value === 'string') {
-        return [value, value]
-      }
-      else {
-        return [value.value, value.label]
-      }
-    }))
-  }
-  return props.options
-})
-
-function toggleOption(value: string) {
-  if (props.modelValue.includes(value)) {
-    emit('update:modelValue', props.modelValue.filter(element => element !== value))
-  }
-  else {
-    emit('update:modelValue', [...props.modelValue, value])
-  }
-}
-</script>
-
-<template>
-  <HstWrapper
-    role="group"
-    :title="title"
-    class="poveste-checkbox-list cursor-text"
-    :class="$attrs.class"
-    :style="$attrs.style"
-  >
-    <div class="-my-1">
-      <template
-        v-for="(label, value) in formattedOptions"
-        :key="value"
-      >
-        <label
-          tabindex="0"
-          :for="`${value}-radio`"
-          class="cursor-pointer flex items-center relative py-1 group"
-          @keydown.enter.prevent="toggleOption(value)"
-          @keydown.space.prevent="toggleOption(value)"
-          @click="toggleOption(value)"
-        >
-          <HstSimpleCheckbox
-            :model-value="modelValue.includes(value)"
-            class="mr-2"
-          />
-          {{ label }}
-        </label>
-      </template>
-    </div>
-
-    <template #actions>
-      <slot name="actions" />
-    </template>
-  </HstWrapper>
-</template>

package/src/components/checkbox/HstSimpleCheckbox.story.vue

@@ -1,28 +0,0 @@
-<script lang="ts" setup>
-import HstSimpleCheckbox from './HstSimpleCheckbox.vue'
-
-function initState() {
-  return {
-    checked: true,
-  }
-}
-</script>
-
-<template>
-  <Story
-    title="internals/HstSimpleCheckbox"
-    :layout="{ type: 'single', iframe: false }"
-  >
-    <Variant
-      title="playground"
-      :init-state="initState"
-    >
-      <template #default="{ state }">
-        <HstSimpleCheckbox
-          v-model="state.checked"
-          with-toggle
-        />
-      </template>
-    </Variant>
-  </Story>
-</template>