@poveste/controls 0.6.1 → 0.7.0

package/src/components/slider/HstSlider.vue

@@ -1,106 +0,0 @@
-<script lang="ts">
-export default {
-  name: 'HstSlider',
-  inheritAttrs: false,
-}
-</script>
-
-<script lang="ts" setup>
-import type { CSSProperties } from 'vue'
-import { VTooltip as vTooltip } from 'floating-vue'
-import { computed, ref } from 'vue'
-import HstWrapper from '../HstWrapper.vue'
-
-const props = defineProps<{
-  title?: string
-  modelValue?: number | null
-  min: number
-  max: number
-}>()
-
-const emit = defineEmits({
-  'update:modelValue': (newValue: number) => true,
-})
-
-const showTooltip = ref(false)
-const input = ref<HTMLInputElement>(null)
-
-const numberModel = computed({
-  get: () => props.modelValue,
-  set: (value) => {
-    emit('update:modelValue', value)
-  },
-})
-
-const percentage = computed(() => {
-  return (props.modelValue - props.min) / (props.max - props.min)
-})
-
-const tooltipStyle = computed<CSSProperties>(() => {
-  const gap = 8
-  if (input.value) {
-    const position = gap + ((input.value.clientWidth - 2 * gap) * percentage.value)
-    return {
-      left: `${position}px`,
-    }
-  }
-  return {}
-})
-</script>
-
-<template>
-  <HstWrapper
-    class="poveste-slider items-center"
-    :title="title"
-    :class="$attrs.class"
-    :style="$attrs.style"
-  >
-    <div class="relative w-full flex items-center">
-      <div class="absolute inset-0 flex items-center">
-        <div class="border border-black/25 dark:border-white/25 h-1 w-full rounded-full" />
-      </div>
-      <input
-        ref="input"
-        v-model.number="numberModel"
-        class="range-input appearance-none border-0 bg-transparent cursor-pointer relative w-full m-0 text-gray-700"
-        type="range"
-        v-bind="{ ...$attrs, class: null, style: null, min, max }"
-        @mouseover="showTooltip = true"
-        @mouseleave="showTooltip = false"
-      >
-      <div
-        v-if="showTooltip"
-        v-tooltip="{ content: modelValue.toString(), shown: true, distance: 16, delay: 0 }"
-        class="absolute"
-        :style="tooltipStyle"
-      />
-    </div>
-  </HstWrapper>
-</template>
-
-<style lang="pcss">
-/* v4: @apply in a component <style> needs the theme referenced explicitly. */
-@reference "../../style/main.css";
-
-.range-input {
-  &::-webkit-slider-thumb {
-    @apply appearance-none h-3 w-3 bg-white dark:bg-gray-700 border border-solid border-black/25 dark:border-white/25 rounded-full;
-  }
-
-  &:hover::-webkit-slider-thumb {
-    @apply bg-primary-500!  border-primary-500!;
-  }
-}
-
-/* Separate rules for -moz-range-thumb to prevent a bug with Safari that causes it to ignore custom style */
-
-.range-input {
-  &::-moz-range-thumb {
-    @apply appearance-none h-3 w-3 bg-white dark:bg-gray-700 border border-solid border-black/25 dark:border-white/25 rounded-full;
-  }
-
-  &:hover::-moz-range-thumb {
-    @apply bg-primary-500!  border-primary-500!;
-  }
-}
-</style>

package/src/components/text/HstText.story.vue

@@ -1,63 +0,0 @@
-<script lang="ts" setup>
-import HstText from './HstText.vue'
-
-function initState() {
-  return {
-    label: 'My really long label',
-    text: '',
-  }
-}
-</script>
-
-<template>
-  <Story
-    title="HstText"
-    group="controls"
-    :layout="{
-      type: 'grid',
-      width: '100%',
-    }"
-  >
-    <Variant
-      title="default"
-      :init-state="initState"
-    >
-      <template #default="{ state }">
-        <HstText
-          v-model="state.text"
-          :title="state.label"
-        />
-      </template>
-
-      <template #controls="{ state }">
-        <HstText
-          v-model="state.label"
-          title="Label"
-        />
-        <HstText
-          v-model="state.text"
-          title="Text"
-        />
-      </template>
-    </Variant>
-
-    <Variant
-      title="no-label"
-      :init-state="initState"
-    >
-      <template #default="{ state }">
-        <HstText
-          v-model="state.text"
-          placeholder="Enter some text..."
-        />
-      </template>
-
-      <template #controls="{ state }">
-        <HstText
-          v-model="state.text"
-          title="Text"
-        />
-      </template>
-    </Variant>
-  </Story>
-</template>

package/src/components/text/HstText.vue

@@ -1,44 +0,0 @@
-<script lang="ts">
-export default {
-  name: 'HstText',
-}
-</script>
-
-<script lang="ts" setup>
-import { ref } from 'vue'
-import HstWrapper from '../HstWrapper.vue'
-
-defineProps<{
-  title?: string
-  modelValue?: string | null
-}>()
-
-const emit = defineEmits({
-  'update:modelValue': (newValue: string) => true,
-})
-
-const input = ref<HTMLInputElement>()
-</script>
-
-<template>
-  <HstWrapper
-    :title="title"
-    class="poveste-text cursor-text items-center"
-    :class="$attrs.class"
-    :style="$attrs.style"
-    @click="input.focus()"
-  >
-    <input
-      ref="input"
-      v-bind="{ ...$attrs, class: null, style: null }"
-      type="text"
-      :value="modelValue"
-      class="text-inherit bg-transparent w-full outline-none px-2 py-1 -my-1 border border-solid border-black/25 dark:border-white/25 focus:border-primary-500 dark:focus:border-primary-500 rounded-sm"
-      @input="emit('update:modelValue', ($event.target as HTMLInputElement).value)"
-    >
-
-    <template #actions>
-      <slot name="actions" />
-    </template>
-  </HstWrapper>
-</template>

package/src/components/textarea/HstTextarea.story.vue

@@ -1,35 +0,0 @@
-<script lang="ts" setup>
-import HstTextarea from './HstTextarea.vue'
-
-function initState() {
-  return {
-    text: '',
-  }
-}
-</script>
-
-<template>
-  <Story
-    title="HstTextarea"
-    group="controls"
-  >
-    <Variant
-      title="default"
-      :init-state="initState"
-    >
-      <template #default="{ state }">
-        <HstTextarea
-          v-model="state.text"
-          title="Textarea"
-        />
-      </template>
-
-      <template #controls="{ state }">
-        <HstTextarea
-          v-model="state.text"
-          title="Text"
-        />
-      </template>
-    </Variant>
-  </Story>
-</template>

package/src/components/textarea/HstTextarea.vue

@@ -1,44 +0,0 @@
-<script lang="ts">
-export default {
-  name: 'HstTextarea',
-  inheritAttrs: false,
-}
-</script>
-
-<script lang="ts" setup>
-import { ref } from 'vue'
-import HstWrapper from '../HstWrapper.vue'
-
-defineProps<{
-  title?: string
-  modelValue?: string | null
-}>()
-
-const emit = defineEmits({
-  'update:modelValue': (newValue: string) => true,
-})
-
-const input = ref<HTMLInputElement>()
-</script>
-
-<template>
-  <HstWrapper
-    :title="title"
-    class="poveste-textarea cursor-text"
-    :class="$attrs.class"
-    :style="$attrs.style"
-    @click="input.focus()"
-  >
-    <textarea
-      ref="input"
-      v-bind="{ ...$attrs, class: null, style: null }"
-      :value="modelValue"
-      class="text-inherit bg-transparent w-full outline-none px-2 py-1 -my-1 border border-solid border-black/25 dark:border-white/25 focus:border-primary-500 dark:focus:border-primary-500 rounded-sm box-border resize-y min-h-[26px]"
-      @input="emit('update:modelValue', ($event.target as HTMLInputElement).value)"
-    />
-
-    <template #actions>
-      <slot name="actions" />
-    </template>
-  </HstWrapper>
-</template>

package/src/end.d.ts

@@ -1,8 +0,0 @@
-import type { Ref } from '@poveste/vendors/vue'
-
-global {
-  interface Window {
-    __pvt_controls_dark: Ref<boolean>[]
-    __pvt_controls_dark_ready: () => void
-  }
-}

package/src/index.ts

@@ -1,54 +0,0 @@
-import HstButtonVue from './components/button/HstButton.vue'
-import HstButtonGroupVue from './components/button/HstButtonGroup.vue'
-import HstCheckboxVue from './components/checkbox/HstCheckbox.vue'
-import HstCheckboxListVue from './components/checkbox/HstCheckboxList.vue'
-import HstColorSelectVue from './components/colorselect/HstColorSelect.vue'
-import HstColorShadesVue from './components/design-tokens/HstColorShades.vue'
-import HstTokenGridVue from './components/design-tokens/HstTokenGrid.vue'
-import HstTokenListVue from './components/design-tokens/HstTokenList.vue'
-import HstCopyIconVue from './components/HstCopyIcon.vue'
-import HstJsonVue from './components/json/HstJson.vue'
-import HstNumberVue from './components/number/HstNumber.vue'
-import HstRadioVue from './components/radio/HstRadio.vue'
-import HstSelectVue from './components/select/HstSelect.vue'
-import HstSliderVue from './components/slider/HstSlider.vue'
-import HstTextVue from './components/text/HstText.vue'
-import HstTextareaVue from './components/textarea/HstTextarea.vue'
-
-export const HstButton = HstButtonVue
-export const HstButtonGroup = HstButtonGroupVue
-export const HstCheckbox = HstCheckboxVue
-export const HstCheckboxList = HstCheckboxListVue
-export const HstText = HstTextVue
-export const HstNumber = HstNumberVue
-export const HstSlider = HstSliderVue
-export const HstTextarea = HstTextareaVue
-export const HstSelect = HstSelectVue
-export const HstColorShades = HstColorShadesVue
-export const HstTokenList = HstTokenListVue
-export const HstTokenGrid = HstTokenGridVue
-export const HstCopyIcon = HstCopyIconVue
-export const HstRadio = HstRadioVue
-export const HstJson = HstJsonVue
-export const HstColorSelect = HstColorSelectVue
-
-export const components = {
-  HstButton,
-  HstButtonGroup,
-  HstCheckbox,
-  HstCheckboxList,
-  HstText,
-  HstNumber,
-  HstSlider,
-  HstTextarea,
-  HstSelect,
-  HstRadio,
-  HstJson,
-  HstColorShades,
-  HstTokenList,
-  HstTokenGrid,
-  HstCopyIcon,
-  HstColorSelect,
-}
-
-export * from './types'

package/src/style/main.css

@@ -1,65 +0,0 @@
-@import 'floating-vue/dist/style.css';
-
-/*
- * Tailwind v4. Preflight is intentionally omitted (was `corePlugins.preflight:
- * false` in v3) by importing the theme + utilities layers individually. The
- * `ptw-` utility prefix is gone — chrome/story isolation is handled by @scope (#27).
- */
-@layer theme, base, components, utilities;
-@import 'tailwindcss/theme.css' layer(theme);
-@import 'tailwindcss/utilities.css' layer(utilities);
-
-/* Chrome dark mode. Deliberately a distinct class from the story-side
-   `theme.darkClass` default (`dark`) so chrome and story themes stay independent —
-   in v3 the `ptw-` prefix applied to the dark class and kept them separate. */
-@custom-variant dark (&:where(.ptw-dark, .ptw-dark *));
-
-@theme {
-  /* primary = emerald (ported from the root v3 config) */
-  --color-primary-50: var(--color-emerald-50);
-  --color-primary-100: var(--color-emerald-100);
-  --color-primary-200: var(--color-emerald-200);
-  --color-primary-300: var(--color-emerald-300);
-  --color-primary-400: var(--color-emerald-400);
-  --color-primary-500: var(--color-emerald-500);
-  --color-primary-600: var(--color-emerald-600);
-  --color-primary-700: var(--color-emerald-700);
-  --color-primary-800: var(--color-emerald-800);
-  --color-primary-900: var(--color-emerald-900);
-  --color-primary-950: var(--color-emerald-950);
-
-  /* gray = zinc, plus the custom 750/850/950 shades from the root v3 config */
-  --color-gray-50: var(--color-zinc-50);
-  --color-gray-100: var(--color-zinc-100);
-  --color-gray-200: var(--color-zinc-200);
-  --color-gray-300: var(--color-zinc-300);
-  --color-gray-400: var(--color-zinc-400);
-  --color-gray-500: var(--color-zinc-500);
-  --color-gray-600: var(--color-zinc-600);
-  --color-gray-700: var(--color-zinc-700);
-  --color-gray-750: #323238;
-  --color-gray-800: var(--color-zinc-800);
-  --color-gray-850: #1f1f21;
-  --color-gray-900: var(--color-zinc-900);
-  --color-gray-950: #101012;
-
-  /* border radius (ported from the root v3 config) */
-  --radius-sm: 0.25rem;
-  --radius: 0.375rem;
-  --radius-md: 0.5rem;
-  --radius-lg: 0.75rem;
-  --radius-xl: 1rem;
-  --radius-2xl: 1.5rem;
-  --radius-3xl: 2rem;
-}
-
-body {
-  font-size: 1.125rem;
-  @apply dark:text-gray-100;
-}
-
-@media (min-width: 640px) {
-  body {
-    font-size: .875rem;
-  }
-}

package/src/types.ts

@@ -1,4 +0,0 @@
-export interface HstControlOption {
-  label: string
-  value: any
-}

package/src/utils.ts

@@ -1,12 +0,0 @@
-import { ref } from 'vue'
-
-export const isDark = ref(false)
-
-if (!window.__pvt_controls_dark) {
-  window.__pvt_controls_dark = []
-}
-
-// There could be multiple instances of the controls lib (in the controls book https://controls.poveste.dev)
-window.__pvt_controls_dark.push(isDark)
-
-window.__pvt_controls_dark_ready?.()

package/tsconfig.json

@@ -1,53 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ESNext",
-    // Volar
-    "jsx": "preserve",
-    "lib": [
-      "ESNext",
-      "DOM"
-    ],
-    "baseUrl": ".",
-    "rootDir": "src",
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    // Alias
-    "paths": {
-      "floating-vue": ["./node_modules/@poveste/vendors/floating-vue"],
-      "@iconify/vue": ["./node_modules/@poveste/vendors/iconify"],
-      "pinia": ["./node_modules/@poveste/vendors/pinia"],
-      "scroll-into-view-if-needed": ["./node_modules/@poveste/vendors/scroll"],
-      "vue-router": ["./node_modules/@poveste/vendors/vue-router"],
-      "@vueuse/core": ["./node_modules/@poveste/vendors/vue-use"],
-      "vue": ["./node_modules/@poveste/vendors/vue"]
-    },
-    "resolveJsonModule": true,
-    "types": [
-      "node"
-    ],
-    "strictBindCallApply": true,
-    "strictFunctionTypes": true,
-    "alwaysStrict": true,
-    // Strict
-    "noImplicitAny": false,
-    "noImplicitThis": true,
-    // Output
-    "outDir": "dist",
-    "removeComments": false,
-    "sourceMap": false,
-    "allowSyntheticDefaultImports": true,
-    "esModuleInterop": true,
-    "preserveSymlinks": true,
-    "skipLibCheck": true,
-    "preserveWatchOutput": true
-  },
-  "include": [
-    "src"
-  ],
-  "exclude": [
-    "node_modules",
-    "generated/**/*",
-    "dist/**/*",
-    "src/**/*.spec.ts"
-  ]
-}

package/vite.config.ts

@@ -1,46 +0,0 @@
-/// <reference types="vitest" />
-
-import vue from '@vitejs/plugin-vue'
-import { defineConfig } from 'vite'
-
-export default defineConfig({
-  plugins: [
-    vue(),
-  ],
-  resolve: {
-    alias: process.env.VITEST
-      ? {}
-      : {
-          'floating-vue': '@poveste/vendors/floating-vue',
-          '@iconify/vue': '@poveste/vendors/iconify',
-          'pinia': '@poveste/vendors/pinia',
-          'scroll-into-view-if-needed': '@poveste/vendors/scroll',
-          'vue-router': '@poveste/vendors/vue-router',
-          '@vueuse/core': '@poveste/vendors/vue-use',
-          'vue': '@poveste/vendors/vue',
-        },
-  },
-
-  build: {
-    emptyOutDir: false,
-
-    lib: {
-      entry: 'src/index.ts',
-      formats: [
-        'es',
-      ],
-      fileName: 'index.es',
-    },
-
-    rollupOptions: {
-      external: [
-        /@poveste/,
-      ],
-    },
-  },
-
-  test: {
-    environment: 'jsdom',
-    globals: true,
-  },
-})