Merge branch 'release/v0.26.5'

lib/basic/index.styl

@@ -1,7 +1,8 @@
 @require "./oui-card.styl";
+@require "./oui-checkbox.styl";
+@require "./oui-file.styl";
 @require "./oui-form-item.styl";
 @require "./oui-form.styl";
-@require "./oui-file.styl";
 @require "./oui-input-group.styl";
 @require "./oui-log.styl";
 @require "./oui-notice.styl";

lib/basic/oui-checkbox.styl

@@ -0,0 +1,8 @@
+@require "../../stylus/index.styl";
+
+.oui-form-item-checkbox {
+  &._disabled {
+    color: var(--s2-fg);
+    cursor: not-allowed;
+  }
+}

lib/basic/oui-checkbox.vue

@@ -2,6 +2,7 @@
 import { computed } from 'vue'
 
 import './oui-form.styl'
+import './oui-checkbox.styl'
 
 defineOptions({
   inheritAttrs: false,
@@ -40,7 +41,7 @@ const klass = computed(() => {
 
 <template>
   <template v-if="title || $slots.default">
-    <label :class="{ _disabled: $attrs.disabled }">
+    <label class="oui-form-item-checkbox" :class="{ _disabled: $attrs.disabled }">
       <input v-model="modelBool" type="checkbox" :class="klass" v-bind="$attrs">
       {{ ' ' }}
       <slot>{{ title }}</slot>

lib/basic/oui-datetime.vue

@@ -53,6 +53,12 @@ const date = computed({
     :description="description"
     :required="required"
   >
-    <input :id="id" v-model="date" type="datetime-local" class="oui-input oui-input-datetime">
+    <input
+      :id="id"
+      v-model="date"
+      type="datetime-local"
+      class="oui-input oui-input-datetime"
+      v-bind="$attrs"
+    >
   </OuiFormItem>
 </template>

lib/basic/oui-file.demo.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { OuiDemo, OuiFile, OuiInput } from '@/lib'
+import { OuiCheckbox, OuiDemo, OuiFile, OuiInput } from '@/lib'
 import { useLocalStorage } from '@vueuse/core'
 
 const state = useLocalStorage('oui.demo.file', {
@@ -10,6 +10,7 @@ const state = useLocalStorage('oui.demo.file', {
   title: 'A file input',
   titleChoose: 'Choose a file',
   filename: '',
+  disabled: false,
 })
 </script>
 
@@ -21,6 +22,7 @@ const state = useLocalStorage('oui.demo.file', {
       :multiple="state.multiple"
       :title="state.title"
       :accept="state.accept"
+      :disabled="state.disabled"
     >
       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-image-up"><path d="M10.3 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v10l-3.1-3.1a2 2 0 0 0-2.814.014L6 21" /><path d="m14 19.5 3-3 3 3" /><path d="M17 22v-5.5" /><circle cx="9" cy="9" r="2" /></svg>
       Upload an image
@@ -37,13 +39,14 @@ const state = useLocalStorage('oui.demo.file', {
       :title="state.title"
       :title-choose="state.titleChoose"
       :accept="state.accept"
+      :disabled="state.disabled"
     />
   </div>
   <OuiDemo :state="state">
     <OuiInput v-model="state.title" title="Title" />
     <OuiInput v-model="state.titleChoose" title="Title Choose" />
     <OuiInput v-model="state.accept" title="Accept file types (MIME)" />
     <!-- <OuiCheckbox v-model="state.multiple" switch title="Multiple files" /> -->
-    <!-- <OuiCheckbox v-model="state.preview" switch title="Preview" /> -->
+    <OuiCheckbox v-model="state.disabled" switch title="Disabled" />
   </OuiDemo>
 </template>

lib/basic/oui-file.styl

@@ -30,4 +30,9 @@
     color: var(--p1-fg);
     border-color: var(--input-border-hover);
   }
+
+  &._disabled {
+    color: var(--s2-fg);
+    cursor: not-allowed;
+  }
 }

lib/basic/oui-file.vue

@@ -20,11 +20,13 @@ const props = withDefaults(defineProps<{
   accept?: string
   // multiple?: boolean
   // preview?: boolean
+  disabled?: boolean
   required?: boolean
   id?: string
 }>(), {
   accept: 'image/*',
   multiple: false,
+  disabled: false,
 })
 
 // const emit = defineEmits<{
@@ -35,10 +37,6 @@ const log: LoggerInterface = Logger('oui-file')
 
 const dropZoneRef = ref<HTMLDivElement>()
 
-// const filename = ref<string>()
-// const filesize = ref<string>()
-// const filetype = ref<string>()
-
 const model = defineModel<string | undefined>({ required: true })
 const modelFilename = defineModel<string | undefined>('filename', { required: false })
 
@@ -52,9 +50,6 @@ async function fileToDataURI(file: File): Promise<string | undefined> {
   const datauri = await promise
   if (datauri) {
     modelFilename.value = file.name
-    // filesize.value = `${(file.size / 1024).toFixed(2)} KB`
-    // filetype.value = file.type
-    // return `${datauri}?type=${encodeURIComponent(file.type)}&name=${encodeURIComponent(file.name)}&size=${file.size}`
   }
   return datauri
 }
@@ -79,6 +74,9 @@ const { files, open, reset, onChange } = useFileDialog({
 })
 
 onChange(async () => {
+  if (props.disabled) {
+    return
+  }
   const file = files.value?.[0]
   if (file) {
     const url = await fileToDataURI(file)
@@ -89,14 +87,17 @@ onChange(async () => {
 })
 
 function doSelect() {
+  if (props.disabled) {
+    return
+  }
   log('select')
   open()
 }
 </script>
 
 <template>
   <OuiFormItem :id="id" :title="title" :description="description" :required="required">
-    <div ref="dropZoneRef" class="oui-file" :class="{ _over: isOverDropZone }" @click.prevent="doSelect">
+    <div ref="dropZoneRef" class="oui-file" :class="{ _over: isOverDropZone, _disabled: disabled }" @click.prevent="doSelect">
       <div class="_content">
         <template v-if="!model || model?.length <= 0">
           <slot>{{ titleChoose ?? t('Choose file...', 'oui.file.choose') }}</slot>

lib/basic/oui-form-item.demo.vue

@@ -2,6 +2,7 @@
 import { OuiDate, OuiDatetime, OuiDemo, OuiFormItem, OuiInput, OuiInputNumber, OuiPassword, OuiSelect, OuiTextarea } from '@/lib'
 import { reactive } from 'vue'
 import { dayFromToday, getTimestamp } from 'zeed'
+import OuiCheckbox from './oui-checkbox.vue'
 
 const state = reactive({
   value1: '',
@@ -12,23 +13,26 @@ const state = reactive({
   select: '',
   date: dayFromToday(),
   datetime: getTimestamp(),
+  disabled: false,
 })
 </script>
 
 <template>
   <div>
-    <OuiFormItem title="TITLE" description="DESCRIPTION" required>
+    <OuiFormItem :disabled="state.disabled" title="TITLE" description="DESCRIPTION" required>
       BODY
     </OuiFormItem>
-    <OuiInput v-model="state.value1" />
-    <OuiInput v-model="state.value2" title="Value with label" description="Some description" required />
-    <OuiInputNumber v-model="state.number" title="Number" />
-    <OuiTextarea v-model="state.text" title="Text" />
-    <OuiTextarea v-model="state.text" title="Text (autosize)" autosize />
-    <OuiPassword v-model="state.password" title="Password" />
-    <OuiSelect v-model="state.select" title="Select" :options="['One', 'Two', 'Three']" />
-    <OuiDate v-model="state.date" title="Date" />
-    <OuiDatetime v-model="state.datetime" title="Date and Time" />
+    <OuiInput v-model="state.value1" :disabled="state.disabled" />
+    <OuiInput v-model="state.value2" :disabled="state.disabled" title="Value with label" description="Some description" required />
+    <OuiInputNumber v-model="state.number" :disabled="state.disabled" title="Number" />
+    <OuiTextarea v-model="state.text" :disabled="state.disabled" title="Text" />
+    <OuiTextarea v-model="state.text" :disabled="state.disabled" title="Text (autosize)" autosize />
+    <OuiPassword v-model="state.password" :disabled="state.disabled" title="Password" />
+    <OuiSelect v-model="state.select" :disabled="state.disabled" title="Select" :options="['One', 'Two', 'Three']" />
+    <OuiDate v-model="state.date" :disabled="state.disabled" title="Date" />
+    <OuiDatetime v-model="state.datetime" :disabled="state.disabled" title="Date and Time" />
   </div>
-  <OuiDemo :state="state" />
+  <OuiDemo :state="state">
+    <OuiCheckbox v-model="state.disabled" title="Disabled" />
+  </OuiDemo>
 </template>

lib/basic/oui-form-item.styl

@@ -16,6 +16,11 @@
     font-size: 13;
     font-weight: 500;
     margin-bottom: 4;
+
+    &._disabled {
+      color: var(--s2-fg);
+      cursor: not-allowed;
+    }
   }
 
   &-description {
@@ -25,6 +30,10 @@
     margin-top: 4;
     margin-bottom: 12;
     color: var(--t3-fg);
+
+    &._disabled {
+      cursor: not-allowed;
+    }
   }
 
   .oui-select {

lib/basic/oui-form-item.vue

@@ -6,12 +6,13 @@ defineProps<{
   description?: string
   required?: boolean
   id?: string
+  disabled?: boolean
 }>()
 </script>
 
 <template>
   <template v-if="title != null || $slots.description || description">
-    <div class="oui-form-item">
+    <div class="oui-form-item" :class="{ _disabled: disabled }">
       <label>
         <div v-if="title" class="oui-form-item-title">
           {{ title }}

lib/basic/oui-input.vue

@@ -63,7 +63,7 @@ function lazyUpdate() {
     :required="required"
   >
     <template v-if="$slots.start || $slots.end">
-      <div class="oui-input oui-input-container">
+      <div class="oui-input oui-input-container" :disabled="$attrs.disabled">
         <slot name="start" />
         <input
           :id="id"

package.json

@@ -1,7 +1,7 @@
 {
   "name": "oui-kit",
   "type": "module",
-  "version": "0.26.4",
+  "version": "0.26.5",
   "author": {
     "email": "[email protected]",
     "name": "Dirk Holtwick",

stylus/ui/form.styl

@@ -62,7 +62,7 @@ oui-button-default() {
 
   &[disabled] {
     background-color: var(--t3-bg);
-    color: var(--t3-fg);
+    color: var(--s2-fg);
     // opacity: 0.6;
     cursor: not-allowed;
   }
@@ -184,8 +184,9 @@ oui-input-default() {
   }
 
   &[disabled] {
-    opacity: 0.6;
-    cursor: initial;
+    background-color: var(--t3-bg);
+    color: var(--s2-fg);
+    cursor: not-allowed;
   }
 }